javascript - react.js typescript spread(...) 只添加最后一个元素

Question

我正在尝试在 react.js 的数组中添加一个元素

this.state.chat_list.map(elem => {
  if (
    elem.name
      .toLowerCase()
      .indexOf(this.props.searching_username.toLowerCase()) !== -1
  ) {
    this.setState(
      { searched_chat_list: [...this.state.searched_chat_list, elem.name] },
      () => {
        console.log(this.state.searched_chat_list);
      }
    );
  }
});

这是代码。

问题是 它只添加结果 中的最后一个元素

假设我有 a,ab,c,d,aad如果我搜索 a它只会返回 aad而不是 a,ab,aad .

我该如何解决这个问题？

Answer 1

当然你想要这样的东西:

this.setState(prev => ({
    searched_chat_list: [
        ...prev.searched_chat_list,
        prev.chat_list.filter(el =>
            el.name
                .toLowerCase()
                .includes(this.props.searching_username.toLowerCase())
        ),
    ],
}))

我纠正了几件事:

如果你在过滤，你应该使用 filter不是 map (如果你试图做一个 for-each，那么使用 forEach 而不是 map 。map 用于将一个数组映射到另一个数组，这不是你在这里做的。

我传递了一个函数给 setState这样我就不会使用陈旧的状态值。你的原因setState仅设置最后一个值是因为您在循环的每次迭代中一直覆盖前一个值。

例如，假设你做了这样的事情:

// State
const state = {
  myArray: [1, 2]
}

// Let's add this array to the one in state
[3, 4, 5, 6].forEach(num => {
  setState({
    // state.myArray is always [1, 2]
    myArray: [...state.myArray, num]
  })
})

你认为这里的结果会是什么？您期待 [1, 2, 3, 4, 5, 6] ，但结果实际上是 [1, 2, 6] .

状态仅在重新渲染时更新，因此 state.myArray 的值总是 [1, 2] ，即使在循环的最后一次迭代 - 因为组件还没有重新渲染，所以状态没有更新。

基本上你这样做:

  setState({myArray: [1, 2, 3]})
  setState({myArray: [1, 2, 4]})
  setState({myArray: [1, 2, 5]})
  setState({myArray: [1, 2, 6]})

现在你能明白为什么只有最后一项被添加到数组中了吗？

如果你的新状态值依赖于之前的状态值，你应该总是传递一个函数给 setState:

// Let's pass a function to setState this time
[3, 4, 5, 6].forEach(num => {
  setState(prev => ({
    // prev is always the most up-to-date state value
    myArray: [...prev.myArray, num]
  }))
})

prev value 总是最新的状态值，所以这里的结果是 [1, 2, 3, 4, 5, 6] ，这就是我们想要的，尽管在您的情况下，您无论如何都不需要迭代数组。