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

【问题标题】：How do I render ReactJS component with filtered props?如何使用过滤后的道具渲染 ReactJS 组件？
【发布时间】：2019-11-28 14:29:39
【问题描述】：

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

接近

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

我创建了以下功能示例，我在其中检查是否使用过滤器选择了下拉（反应选择）。不幸的是，当我选择 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

【问题讨论】：

你应该使用filter而不是map，因为map总是会返回一些东西，如果你跳过返回它会返回undefined作为新数组的项目

标签： javascript arrays reactjs ecmascript-6

【解决方案1】：

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

你可以这样写你的渲染，你总是返回<RenderOverview>组件，如果有一个选择的选项，根据选择的选项过滤你的work，否则使用原来的work列表。

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

【讨论】：

感谢这个有用的答案。你帮了我。