反应：将项目推入状态内的数组

Question

是的，我知道这是一个常见的问题，但是我似乎无法获得提供的示例以适合我的情况... 我的状态中有一个空数组：

constructor(props) {
        super(props);
            this.state = {
                selectedItems: []
             }
         }

我想使用以下代码（在函数中）简单地向该数组添加项目：

this.setState( {
    selectedItems:[...this.state.selectedItems, data]
  })

在这种情况下，数据就是添加到状态数组中的东西。

我遇到的问题（当我进行console.log this.state 时，）是第一次推送到阵列永远不会起作用。以SO为例，如果我将其推入4次不同，则状态数组中将只有3次，并且在我第一次尝试时不会注册。

我不知道为什么。任何帮助表示赞赏。 =）

Answer 1

this.setState( { selectedItems:[...this.state.selectedItems, data] }, () => console.log(this.state))

尝试使用日志作为setState的第二个参数，一旦状态更新，它将运行

Answer 2

如果在设置状态后直接记录状态，则会异步更新状态。要获取最终值，您可以使用setState回调：

this.setState({
  selectedItems: [...this.state.selectedItems, data]
}, () => console.log(this.state))