javascript - 如何映射两个数组并将匹配项作为按钮返回？

Question

我有一组关键字和一组对象。关键字数组与对象数据数组中对象内的标题相匹配。我想映射我所有的对象以寻找关键字匹配并返回该对象的标题。我想对我的关键字数组中的每个关键字执行此操作。

现在，我只能让它对关键字数组中的一个关键字起作用。基本上如果我有...

keyWords = [ "sink", "tub", "brush" ]

我的对象数组包含一个 obj.title 等于这些关键字，它将只匹配其中一个并返回一个名为“sink”的按钮。

我似乎无法遍历我所有的关键字数组，但我正在遍历我的对象数组。

data = array of objects

keyWords = array of key words

目标是映射数据以在我的关键词中寻找匹配项，如果找到匹配项，我想返回一个带有匹配对象标题的按钮。问题在于它不会遍历 keyWords 数组。如果我添加类似 keyWords[0] 的内容，我可以查看该特定项目的匹配项，但我想遍历所有关键字并找到所有匹配项。

const renderKeyButtons = this.props.data.filter(obj => {
   return this.state.keyWords === obj.title;
     }).map((obj, idx) => {
         return (
            <button key={idx}>{obj.title}</button>
         );
 });

我的猜测是我需要添加一些东西来映射关键字，例如附加的 (map, idx) => 函数，但我不确定如何执行此操作并立即返回所有按钮。

Answer 1

使用Array.prototype.includes()无需像这样的任何迭代即可实现它的方法

const renderKeyButtons = this.props.data.filter(obj => {
   return this.state.keyWords.includes(obj.title);
     }).map((obj, idx) => {
         return (
            <button key={idx}>{obj.title}</button>
         );
 });