Javascript 反应事件处理程序按钮单击第一次单击时不工作

我正在制作食谱盒项目从自由代码营地。我有一个事件处理程序，它应该将包含由成分组成的数组属性的对象发送到父组件，父组件将显示数组中的项。问题是，当我第一次单击触发处理程序的按钮时，它发送一个空数组，即使用户输入了成分，第二次单击时，它发送上一次按钮单击的成分，每次单击按钮时都是这样。我怎样才能解决这个问题

有关方法：

  handleSubmit() {
    let ingredientsArrayUpdater = (ingredient) => {
      this.setState(prevState => ({
        ingredientsArr: [
          ...prevState.ingredientsArr,
          ingredient
        ]
      }))
    }

    let splitUserInput = this.state.ingredients.split(',');

    splitUserInput.map(ingredient => {
      return(
      ingredientsArrayUpdater(ingredient.trim())
    )
    });

    let recipeObject = {
      recipeName: this.state.recipe,
      ingredientList: this.state.ingredientsArr,
      idNumber: Math.floor((Math.random() * 100000000) + 1)
    }
    this.props.addRecipe(recipeObject);
  }

触发事件处理程序的按钮的代码：

 <button onClick={e => {this.handleSubmit()}}
               className="btn btn-outline-success btn-sm">
               Add Recipe
              <i className="fas fa-plus"></i>
 </button>

{this.handleSubmit（）}
className=“btn btn大纲成功btn sm”>
添加配方

这里是github存储库，用于查看所有组件。Index.js是父组件

---

首先，当您认为自己在更新状态时，您并没有更新状态。在调用

setState

之后，您也不会等待更新的状态。我不确定您试图通过这种方法实现的目标，但首先：

handleSubmit() {
  let splitUserInput = this.state.ingredients.split(',');
  let newArray = this.state.ingredientsArr.concat(splitUserInput.map(a => a.trim()));

  this.setState({ingredientsArr: newArray});

  let recipeObject = {
    recipeName: this.state.recipe,
    ingredientList: newArray,
    idNumber: Math.floor((Math.random() * 100000000) + 1)
  }
  this.props.addRecipe(recipeObject);
}

这是“作弊”，我们知道状态将被更新。您还可以使用

setState

的回调使其更具单向性

handleSubmit() {
  let splitUserInput = this.state.ingredients.split(',');
  let newArray = this.state.ingredientsArr.concat(splitUserInput.map(a => a.trim()));

  this.setState({ingredientsArr: newArray}, () => {
    let recipeObject = {
      recipeName: this.state.recipe,
      ingredientList: newArray,
      idNumber: Math.floor((Math.random() * 100000000) + 1)
    }
    this.props.addRecipe(recipeObject);
  });
}

同样的区别，国际海事组织