Question

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

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

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

我的猜测是我需要添加一些内容来映射关键字，例如附加（地图，idx）=＆gt;功能，但我不知道如何做到这一点并立即返回所有按钮。

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

Answer 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>
         );
 });

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

2 个答案: