如何在React select中显示数据

Question

当我显示我的数据(select中的categories(时，我想使用React 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);
}

Answer 1

看起来react-selectAPI需要将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>
);
};