Javascript 如何在配方对象数组中编辑配方对象

我正在使用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;
}

并将此方法作为道具传递给

。 但是，当我激活该组件中的方法而不是调用edit prop时，会出现一条错误消息：“this.state.recipe.find（…）未定义”

是否有其他方法来编辑配方

这是我收到的错误消息

---

多谢各位

箭头函数没有自己的

此

从

箭头函数表达式的语法比函数表达式短，并且没有自己的

this

、

参数

、

super

或

new.target

。这些函数表达式最适合于非方法函数，并且不能用作构造函数

不确定，但您可以尝试常规功能：

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;
}

---

它应该为EditRecipe组件提供

this

，因此更改作为道具传递函数的方式

<EditRecipe edit={this.editRecipe.bind(this)} />

---

您需要使用

find

和

objectassign

来编辑/更新数组中的项

我做了一个例子，在代码旁边解释了注释

const JSON=[
{
“id”：1，
“姓名”：“Leanne Graham”，
“用户名”：“Bret”，
“电子邮件”：Sincere@april.biz",
},
{
“id”：2，
“姓名”：“埃尔文·豪厄尔”，
“用户名”：“Antonette”，
“电子邮件”：Shanna@melissa.tv",
},
{
“id”：3，
“姓名”：“克莱门汀·鲍奇”，
“用户名”：“Samantha”，
“电子邮件”：Nathan@yesenia.net",
},
]
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
数据：JSON，
};
}
编辑=（）=>{
常数newData={
“id”：3，
“姓名”：“克莱门汀·鲍奇”，
“用户名”：“Samantha”，
“电子邮件”：New@email.com“，//更改电子邮件地址
}
this.setState（prevState=>{
const findItem=prevState.data.find（row=>row.username===='Samantha'）；//查找要编辑/更新的项
return Object.assign（findItem，newData）//更新数据
})
}
render（）{
返回(
{this.state.data.map（行=>
{row.name}:{row.email}
)}
编辑Clementine Bauch电子邮件
);
}
}
ReactDOM.render（，document.getElementById（'root'））
您的代码存在一些问题，因此我将逐一进行分析


this.state未定义
：我认为您已经通过绑定进行了修复，所以一切正常

this.state.recipe.find（）未定义
：您称赞recipe是一个对象数组。首先，您应该再次检查
配方
数据的来源，以及它是否初始化为数组。第二，检查你的浏览器<代码>数组。查找

，因此更改您的测试浏览器或使用阵列的替代解决方案。查找是必要的

this.state.recipe.find（obj=>obj.name===recipe.name）.name=recipe.name

是不安全的，因为您假定可以始终在列表中找到配方对象。如果Array.find找不到任何内容，您可能会收到错误

无法读取未定义的属性“name”

---

根据错误，它看起来像

this.state.recipe

不是数组。你能在

this.state.recipe

内部

editRecipe

回调中分享你在

this.state.recipe

中得到的值吗？你是什么意思？@lambchop，你能记录

this.state.recipe

中的值吗？谢谢，我试过了，但它仍然给出错误消息

this.state.recipe.find（…）是未定义的

为此添加了修复。state.recipe.find（…）是未定义的谢谢，它可以工作，但直到我在第二次更新配方时单击“编辑配方”按钮。请添加onclick的代码，我不能对该部分发表评论。如果问题已回答，请为堆栈溢出社区标记此已回答谢谢，但错误消息为

prevState.recipe.find（…）未定义

。我不知道为什么，因为我的配方状态是一个对象数组。你建议另一种方法吗？你的问题提供的持有状态的组件的细节太少，无法准确回答。顺便说一句，最初的方法并非完全错误；但是你需要注意我指出的可能的情况以避免错误。是的，find方法假设我不更改原始配方的名称。如果我更改了名称，我应该怎么做才能继续进行编辑？

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