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

Question

我制作了一个过滤器，检查某个字符串是否等于数组(工作 Prop )中描述为属性的类别。该数组是一个restAPI 对象，其中包含来自Wordpress 的postitems。 我认为我不想实现的目标是直接的。 为了可视化我的过滤器，我使用了 React-select node_module 中的预制解决方案来显示我的过滤器。

方法

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

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

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}
    />
);