类型错误：未定义的函数（评估'this.state.list.map'）：

Question

我正在尝试从我的状态中将一个变量推送到名为list的数组中。但是它会抛出一个错误，说undefined不是函数。然而，当我将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: [] 
    }
  }

- user8045426

---

this.state.list.map在哪里？请提供精确的错误信息。 - Rafael

不要使用 push()，它会改变被调用的数组。在 React 中，您不应该直接改变状态。 - Jayce444

哦，我从 this.state.list.map 中添加了一点。 - user8045426

事实上，我的应用程序现在有点慢，我想尝试通过推动（push）来加速它。 - user8045426

Answer 1

Array.push()方法并不会返回数组本身，而是返回数组的长度。因此，该列表从一个数组变为了一个数字。它也直接改变了数组。

正如其他人所说，最好这样做：

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

这样做可以避免直接使用push()来改变状态。

对于那些感兴趣的人，我也想解释一下正在发生的事情。我们不是直接改变this.state.list数组，而是将当前数组复制到一个新的数组中，并同时添加新项。

- Blacky Wolf

Answer 2

如果我理解正确，您在将数据推入React状态数组方面遇到了问题。

您需要像下面这样将值推入数组中。您正在使用的方法是不正确的，而且在React中从不建议修改任何状态。下面是建议的修改React状态数组的方法。

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

像这样改变

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

还要记住，不建议在循环中使用setState。当您想从循环中修改状态值时，请声明一个本地变量，并使用该变量从循环中分配值，最后在循环外执行setState，否则将会收到无限警告。

- Hemadri Dasari

---

非常感谢，Blacky Wolf 回答得最快，但无论如何还是非常感谢。 - user8045426

好的，没问题。这是在React中处理数组的不同且推荐的方式。 - Hemadri Dasari