javascript - 我如何在食谱对象数组中编辑食谱对象

Question

我正在使用 React 制作一个食谱盒项目，为了编辑现有的食谱，我尝试了这段代码，this.state.recipe当前是一个配方对象数组:

editRecipe = (recipe) => {
  this.state.recipe.find(obj => obj.name === recipe.name).name = recipe.name;
  this.state.recipe.find(obj => obj.name === recipe.name).ingredients = recipe.ingredients;
}

并将此方法传递给 <EditRecipe edit={this.editRecipe} />作为 Prop 。但是，当我激活该组件中的方法而不是调用 edit Prop 时，会出现一条错误消息:“this.state.recipe.find(...) is undefined”

还有其他方法可以编辑食谱吗？

这是我收到的错误消息

谢谢。

Answer 1

箭头函数没有自己的this。

来自 MDN

An arrow function expression has a shorter syntax than a function expression and does not have its own this, arguments, super, or new.target. These function expressions are best suited for non-method functions, and they cannot be used as constructors.

不确定，但您可以尝试使用常规函数:

editRecipe = function(recipe){
  this.state.recipe.find(obj => obj.name === recipe.name).name = recipe.name;
  this.state.recipe.find(obj => obj.name === recipe.name).ingredients = 
  recipe.ingredients;
}