react.js concat错误值到数组状态

Question

我使用React构建页面

我有array ['kiwi'，'papaya'，'apple']

我用这些代码

  if(this.state.recordFood.indexOf('kiwi') !=-1){
  this.setState({
    feedbackDisplay: [...this.state.feedbackDisplay,this.state.feedback[0].content]
  })
};
if(this.state.recordFood.indexOf('papaya') !=-1){
  this.setState({
    feedbackDisplay: [...this.state.feedbackDisplay,this.state.feedback[1].content]
  })
};
if(this.state.recordFood.indexOf('apple') !=-1){
  this.setState({
    feedbackDisplay: [...this.state.feedbackDisplay,this.state.feedback[2].content]
  })
};

如果我的数组中有奇异果木瓜苹果，它将连接不同的值以状态反馈显示，所以在代码之后，我将有

this.state.feedback [0]。内容

this.state.feedback [1]。内容

this.state.feedback [2]。内容

在我的状态反馈显示

但这一切都将this.state.feedback [0] .content连接到状态反馈显示

所以我得到了

this.state.feedback [0]。内容

this.state.feedback [0]。内容

this.state.feedback [0]。内容

在我的状态反馈显示

Answer 1

setState不会立即更新状态，因此，如果您连续多次调用setState ，则应将更新程序函数传递给setState 。 这将确保您使用的是最新状态。

this.setState((prevState, props) => ({ feedbackDisplay: [...prevState.feedbackDisplay, this.state.feedback[1].content] }));

尽管首先创建一个数组，然后一次调用setState会更加整洁和易于理解。