如何使用过滤的道具渲染 ReactJS 组件？

Question

我制作了一个过滤器，用于检查某个字符串是否等于描述为数组中的属性的类别（工作道具）。 这个数组是一个带有来自 Wordpress 的 postitems 的 restAPI 对象。 我想实现的目标是直截了当的。 为了可视化我的过滤器，我使用了来自 React-select node_module 的预制解决方案来显示我的过滤器。

方法

如果我的（react-select）下拉过滤器没有被选中或者页面只是堆满了，它应该显示一个包含帖子的完整列表。 否则，如果我从下拉过滤器中选择一个选项，例如“用户体验设计”，它应该显示一个过滤列表，其中包含分类为“用户体验设计”的帖子项目

我创建了以下功能示例，我在其中检查是否使用过滤器选择了下拉列表（react-select）。 不幸的是，当我选择 react-select 下拉列表并通过原始道具“工作”进行过滤时，我没有得到渲染列表而是警告。 我在这里犯了什么错误？

render (){
            const { work } = this.props;
            const { selectedOption } = this.state;

            return selectedOption === null ? (
            <RenderOverview work={work} />
            ) : (
            <RenderOverview
                work={work.map(value => {
                    let type = value.pure_taxonomies.types[0].name;
                    if (type === selectedOption.label) {
                        return value;
                    }
                })}
            />
           );

}

在我的控制台中，我在运行脚本后回来了。

47:42  warning  Expected to return a value at the end of this function array-callback-return

Answer 1

您正在使用map而不是filter ，如果您没有在 map 函数中返回某些内容，它将返回undefined作为您新数组中的项目。

你可以写你的渲染如下，你总是返回<RenderOverview>组件，如果有选择的选项，根据选择的选项过滤你的work ，否则返回原始work列表。

return (
    <RenderOverview
        work={selectedOption ? work.filter(value => value.pure_taxonomies.types[0].name === selectedOption.label) : work}
    />
);