Question

我正在从Free Code Camp制作Recipe Box项目。我有一个事件处理程序，它应该发送一个对象，该对象包含一个由成分组成的数组属性，直到父组件，它将显示数组中的项目。问题是，当我第一次单击触发处理程序的按钮时，即使用户输入了成分，它也会发送一个空数组，第二次单击它时，它会发送前一个按钮点击的成分，然后它每次单击按钮时都会这样继续。我该如何解决这个问题？

有问题的方法：

  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>

这是github存储库，可以查看所有组件。 Index.js是父组件。

https://github.com/EsTrevino/recipe-box-project/tree/master/src

Answer 1

首先，当你认为自己时，你不会更新状态。在致电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);
}

那是＆＃34;作弊＆＃34;使用我们所知道的状态将更新为。您还可以使用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);
  });
}

同样的不同，IMO。

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

1 个答案: