javascript - 如何使用过滤后的道具渲染ReactJS组件？(How do I render ReactJS component with filtered props?)

Question

I've made a filter where I check if some string is equal to the category described as a property in an array(work props).(我做了一个过滤器，在其中检查一些字符串是否等于数组中描述为属性的类别（工作道具）。)

This array is a restAPI object with postitems from Wordpress.(该数组是一个RestAPI对象，带有Wordpress的后项。) What I wan't to achieve is straight forward I think.(我想我不会实现的直截了当。) For visualising my filter I used a pre-fab solution from React-select node_module to show my filters.(为了可视化我的过滤器，我使用了来自React-select node_module的预制解决方案来显示我的过滤器。) Approach(方法) If my (react-select) dropdown filter is not selected or the page is just mounded, it should show a full list with posts.(如果未选择我的（反应选择）下拉过滤器，或者页面刚刚堆砌，则它应显示包含帖子的完整列表。) Else if I select an option from the dropdown filter eg 'UX design' It should show a filtered list with post items categorized with 'Ux design'(否则，如果我从下拉过滤器中选择一个选项，例如“ UX设计”，则应显示一个过滤列表，其中包含按“ Ux设计”分类的帖子) I created the below functional example where I check if the dropdown(react-select) is selected with a filter or not.(我创建了以下功能示例，其中检查是否使用过滤器选择了dropdown（react-select）。) Unfortunately when I select the react-select dropdown and filter trough the original prop 'work' I do not get back a rendered list but a warning.(不幸的是，当我选择“反应选择”下拉列表并通过原始道具“ work”进行过滤时，我没有返回渲染列表，而是一个警告。) What mistake do I make here?(我在这里犯什么错误？) 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; } })} /> ); } In my console I got back after running the script.(在我的控制台中，运行脚本后我又回来了。) 47:42 warning Expected to return a value at the end of this function array-callback-return   ask by WDP translate from so

Answer 1

You are using map instead of filter , if you did not return something in your map function, it will return undefined as your item in your new array.(您使用的是map而不是filter ，如果您没有在map函数中返回任何内容，它将返回undefined作为新数组中的项目。)

You can write your render as the following, you always return <RenderOverview> component, and if there is a selected option, filter your work based on the selected option, otherwise use back the original work list.(您可以按以下方式编写渲染，始终返回<RenderOverview>组件，如果有选定的选项，请根据选定的选项过滤work ，否则请使用原始work列表。) return ( <RenderOverview work={selectedOption ? work.filter(value => value.pure_taxonomies.types[0].name === selectedOption.label) : work} /> );