代码之家 › 专栏 › 技术社区 › David Jay

如何在React select中显示我的数据

reactjs javascript

David Jay · 技术社区 · 3 年前

我想使用React select为电影创建一个基于类别的过滤器,当我分散我的数据时(select中的类别),它不起作用。我尝试了很多,但仍然没有奏效。

我是React的新手,谢谢你的帮助或评论。

“类别”是我存储所有类别的状态的变量 -[“喜剧”、“动画”、“惊悚片”、“戏剧”]

-FilterMovie是一个根据电影类别过滤电影的函数

ps:电影以单独的状态存储

这是类别筛选器:

import React from 'react';
import Select from 'react-select';


const CategoriesFilter = ({categories, filterMovie}) => {
    return (
    <div>  
    
    <Select
    className="select-option"
    options={categories}
    placeholder={"type something"}
    />
    </div>
      
    )
}

export default CategoriesFilter;

滤镜电影来自app.js

 //filter movies based on their categories
  const filterMovie = (category) => {
    const filterMovie = MoviesData.filter((movie)=> movie.category === category);
    setMoviesList(filterMovie);
  }

0 回复 | 直到 3 年前

Nick 3 年前

看起来像 react-select API要求 options 格式化为对象数组 value 和 label 钥匙。您可以使用Array.map方法来完成此操作。然后,您可以通过 filterMovie 直接作用于 onChange 组件的处理程序。

const CategoriesFilter = ({ categories, filterMovie }) => {
  const options = cateogries.map((c) => ({ value: c, label: c }));

  return (
    <div>
      <Select
        className="select-option"
        options={options}
        placeholder={"type something"}
        onChange={filterMovie}
      />
    </div>
  );
};

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前