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

Posted 2023-02-22

【中文标题】如何映射两个数组并将匹配项作为按钮返回？

【英文标题】：How can I map over two arrays and return matches as buttons?

【发布时间】：2018-06-09 08:09:03

【问题描述】：

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

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

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

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

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

数据 = 对象数组

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) => 函数，但我不确定如何执行此操作并一次返回所有按钮。

【问题讨论】：

我认为你的过滤函数应该是return this.state.keyWords.indexOf(obj.title) > -1;，因为 this.state.keyWords 是一个数组，而你正在搜索 obj.title（对吗？）。

includes 似乎完全符合我的要求

【参考方案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>
         );
 );

【讨论】：

是的，包括做得很好。

【参考方案2】：

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

【讨论】：

非常感谢 - 我相信这是第一位的，所以我会接受这个