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

Posted 2021-04-07

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

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

keyWords = [“sink”，“tub”，“brush”]

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

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

data =对象数组

keyWords =关键词数组

我的目标是在我的关键词中映射寻找匹配项的数据，如果我找到匹配项，我想返回一个带有匹配对象标题的按钮。这个问题是它不会遍历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）=>函数，但我不知道如何做到这一点并立即返回所有按钮。

答案

您正在尝试将数组与字符串进行比较。使用Array#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>
         );
 });

另一答案

使用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>
         );
 });