TypeError: undefined is not a function (evaluating 'this.state.list.map')

Question

所以我試圖將一個變量從我的 state 推入一個名為列表的數組。但它拋出了這個錯誤，說未定義不是 function。但是，當我將 push 切換到 concat 時，它起作用了。 但是我想使用 push 因為它更快。 我該如何解決這個問題？

AsyncStorage.getItem("one").then((value) => {
    if (value === "true"){
      this.setState({
        list: this.state.list.push({
          name: 'Butter',
          checkbox: 1,
        })
      })
    }
    else {
      this.setState({
        unavailable: this.state.unavailable.push(
          "butter"
        )
      })
    }
});

我的列表是這樣聲明的

  constructor() {
    super()
    this.state = {
      unavailable: [],
      list: [] 
    }
  }

Answer 1

Array.push()不返回數組，它返回數組長度。 因此，列表從數組變為數字。 它還直接改變數組。

正如其他人所說，最好這樣做：

this.setState({
    list: [
        ...this.state.list,
        { name: 'Butter', checkbox: 1 }
    ]
})

這樣 state 就不會直接通過使用push()發生突變。

我想我也會為那些感興趣的人解釋發生了什么。 我們不是直接改變或更改ths.state.list數組，而是將當前數組復制到一個新數組並同時附加新項。

Answer 2

如果我理解正確的話，你在將數據推送到 React state 數組時遇到了問題

您需要在 React 中將值推送到數組，如下所示。 你做的不正確，也不建議你在 React 中改變任何 state。 下面是改變 React state 數組的推薦方法

  this.setState(prevState => {
    list: [...prevState.list, {
      name: 'Butter',
      checkbox: 1,
    }]
  })

就像把這個改成

   this.setState( prevState => {
    unavailable: [...prevState.unavailable, "butter"]
  })

另請記住，不建議您在循環中執行 setState。 當你想修改循環中的 state 值時，聲明一個局部變量並使用它從循環中賦值，最后在循環外執行 setState 否則你會得到無限警告