Question

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

方法

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

我创建了以下功能示例，其中检查是否使用过滤器选择了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

Answer 1

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

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

work

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

1 个答案: