Question

这是我的代码，无法弄清楚为什么这不会影响我的反应状态？

state = {
    popUpMessages:[]
  }
  popUpMessage(id,name) {
    console.log("id ",id,"name ",name)
    const addUserObject = { id, name };
    const newArray = [...this.state.popUpMessages, addUserObject]
    console.log("newArray = ",newArray)
    this.setState({ popUpMessages: newArray });
  }

在此代码中，调用popUpMessage来更新状态：

<li  onClick={() => this.popUpMessage(this.props.id,this.props.name)}>{this.props.name}</li>

但是我的状态没有更新，当我尝试登录时，先前的用户对象被删除了？我希望我的状态是这样的对象数组：

[{id:1, name: kim bok joo},{id:2, name: ria atayde}]

Answer 1

The docs say在计算新状态时，您不应该依赖this.state的先前值。

但你这样做：const newArray = [...this.state.popUpMessages, addUserObject]

尝试使用接受先前状态的函数并使用道具，如文档中所示。

Answer 2

如上所述，并不是完全建议这样做。但是，如果你想这样做，这就是你所要做的。

  popUpMessage(id,name) {
    const addUserObject = { id, name };
    const newArray = this.state.popUpMessages.concat([addUserObject])
    this.setState({ popUpMessages: newArray });
  }

我无法在反应中更新我的阵列状态？

2 个答案: