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 否则你会得到无限警告