Question

我想做的是通过添加用户按下的按钮名称字符串来更新状态数组。用户有几个按钮，因此在按下所有按钮后，我应该留下一串与用户按钮按下相关的字符串。

首先，我给用户一个警报，告诉他们添加了哪些食物，然后我只是尝试将该食物的名称附加到状态为的数组中。之后，我将该数组传递回父组件，以在那里更新一个类似的数组。

我得到的问题是，当我按下食物选项之一时，处于状态的阵列不会更新，但是我确实得到了正确的警报。当我尝试第二次添加食物时，状态数组会使用我选择的第一个选项进行更新。从那时起，每次我尝试添加食物Item时，状态数组都会使用我之前选择的食物进行更新。

我相信问题在于我正在以一种React不会立即执行的方式更新状态。我知道React无法保证状态更新。

很长的帖子，很抱歉，谢谢您的时间。

rezip -int -defl -touch -comp A.zip

Answer 1

setState的第二个参数应该是一个函数，而不是函数调用。当新状态基于旧状态时，最好使用setState(oldState => newState)：

  handleClick(e) {
    const name = e.target.name;
    alert("Added " + name);
    this.setState(oldState => ({
        addedFoods: [...oldState.addedFoods, name]
      }),
      () => this.props.updateAddedFoods(this.state.addedFoods)
    );
  }

Answer 2

setState是异步的，因此当您将this.state.addedFoods作为this.props.updatedAddedFoods的参数传递时，您是在更改状态之前传递状态。既然您似乎在复制数据，我是否可以建议只有父母才能拥有这一系列食物并将其作为道具传递给孩子？

Answer 3

所以，正如我在评论中所说，我认为handleClick()是问题所在，更确切地说是您如何更新状态。
您能否尝试按以下方式编写该函数：

handleClick(e) {
    const newAddedFoods = Object.assign([], this.state.addedFoods);
    newAddedFoods.push(e.target.name);

    this.setState({addedFoods: newAddedFoods }, () => this.props.updateAddedFoods(newAddedFoods));
}

尽管，@ Iarz完全正确：看来您在父组件和子组件中都具有相同的数据。只需将其保留在父组件中，然后将数据和函数传递给子组件即可。

反应阵列状态更新较晚

3 个答案: