Javascript 如何在另一个数组中搜索数组中的值_Javascript_Arrays_Reactjs

Javascript 如何在另一个数组中搜索数组中的值

javascript arrays reactjs

Javascript 如何在另一个数组中搜索数组中的值,javascript,arrays,reactjs,Javascript,Arrays,Reactjs,我在另一个数组中的一个数组中找到一个值，并使用结果setState（）这是初始状态： this.state = { initialStudents:[ {name:"str1",tags;["str","str",...],...}, {name:"str2",tags;["str","str",...],...}, ... ], students: [ {name:"str1",tags;["s

我在另一个数组中的一个数组中找到一个值，并使用结果

setState（）

这是初始状态：

this.state = 
{
    initialStudents:[
        {name:"str1",tags;["str","str",...],...},
        {name:"str2",tags;["str","str",...],...},
        ...  
       ],
   students: [
        {name:"str1",tags;["str","str",...],...},
        {name:"str2",tags;["str","str",...],...},
        ...
      ]
}

我用于查找标记的代码：

findTag = (tags, target) => {
    tags.filter(tag => {
        return tag.toLowerCase().search(target.toLowerCase()) !== >-1;
    });
};

filterTag = e => {
    let updatedList = this.state.initialStudents;
        updatedList = updatedList.filter(student => {
            return this.findTag(student.tags, e.target.value);
        });
    this.setState({ students: updatedList });
};

filterTag不更新学生状态

为了解决您的问题，我做了一些编辑，并将它们全部放在这个工作中

首先，我将您的

findTag

函数更改为如下内容：

// pass in the tags from the student, and the target tag you're searching for.
// -> return true if 1 or more matching tag, false otherwise
findTag = (tags, targetTag) => {
  // make sure you return something!
  return tags.filter(tag => {
    // check if current tag in arr matches target tag (case insensitive)
    return tag.toLowerCase() === targetTag.toLowerCase();
  }).length > 0; // check if there's 1 or more matching tag
};

接下来，我以几种方式更新了

filterTag

函数：

将

this.state.initialStudents

不可变地复制到本地

updatedList

数组中这是必需的，这样在运行

This.setState

之前就不会弄乱当前状态

通过

this.state.filterTag

而不是

e.target.value

传递输入值。这样，您可以在单击按钮时更新过滤器，而不是每次按键时都打开过滤器

以下是这些更改的外观：

filterTag = e => {
  // immutably copy initial student data
  let updatedList = this.state.initialStudents
    .map(student => ({
      name: student.name,
      tags: [...student.tags]
    }))
    // remove students w/out filter tag
    .filter(student => {
      return this.findTag(student.tags, this.state.filterTag);
    });

  // update state with new student list
  this.setState({ students: updatedList });
};

我还做了一些其他改进：

我没有在

initialStudents

和

students

中手动设置数据，而是让他们从

const initialStudents

数据集中永久复制相同的数据集。如果要从数据库中获取学生，可以使用

componentDidMount

lifecycle方法来完成

我修复了你的学生对象声明-你把

标记；[“str”…]

无效-分号

应该是正常的冒号

：

我将一些

“str”

值更改为

“str2”

，以使它们在学生之间具有唯一性

如果您对codesandbox或其他任何东西有疑问，请告诉我：我希望它能有所帮助

为了解决您的问题，我做了一些编辑，并将它们全部放在这个工作组中