Question

所以我试图从我的状态将变量推入名为list的数组。但是它抛出了错误，说undefined不是一个函数。但是，当我将推送切换到concat时，它可以工作。但是我想使用推，因为它更快。我该如何解决这个问题？

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 }
    ]
})

通过这种方式，状态不会直接因使用push()而发生突变。

我还想解释一下对此感兴趣的人正在发生的事情。除了直接更改或更改ths.state.list数组外，我们将当前数组复制到新数组中，并同时添加新项。

Answer 2

如果我理解正确，那么在将数据推送到React状态数组时会遇到问题

您需要像下面在React中那样将值推入数组。您做的方式不正确，也绝不建议您在React中改变任何状态。以下是对React状态数组进行突变的推荐方法

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

将其更改为

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

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

TypeError：undefined不是函数（评估“ this.state.list.map”）

2 个答案: