javascript - 如何使用过滤的 Prop 渲染ReactJS组件？

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

方法

如果未选择我的（反应选择）下拉过滤器，或者页面刚刚堆砌，则它应显示包含帖子的完整列表。否则，如果我从下拉过滤器中选择一个选项，例如“ UX设计”，则应显示一个过滤列表，其中包含以“ Ux design”分类的帖子项目

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

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

最佳答案

您使用的是map而不是filter，如果未在map函数中返回任何内容，它将在新数组中返回undefined作为您的项目。

您可以按照以下方式编写渲染器，始终返回<RenderOverview>组件，如果有选定的选项，请根据选定的选项过滤work，否则请使用原始的work列表。

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