Question

我在另一个数组中的一个数组中查找值时遇到了问题，并将结果用于setState()

这是initialState：

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不会更新学生状态

Answer 1

为解决您的问题，我进行了一些编辑，并将其全部放入codesandbox example的工作中。

首先，我将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生命周期方法中完成。
我修复了您的学生对象声明-您放置了无效的tags;["str"...]-分号;应该是普通冒号:
我将一些"str"的值更改为"str2"，以使它们在学生之间是唯一的

如果您对codeandbox或其他任何问题有疑问，请告诉我：D希望它能有所帮助！

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

1 个答案: