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值始終是最新的狀態值，因此這里的結果將是[1, 2, 3, 4, 5, 6] ，這是我們想要的，盡管在您的情況下，您沒有無論如何都需要迭代數組。

Answer 2

簡化它，先過濾而不是添加：

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