Javascript 不正确地反应组件渲染

我有一个react项目，一个配方盒，其中包括打开配方和添加/删除配料的功能。这是。您可以单击配方名称打开配方。有一个编辑按钮，显示删除按钮，并提供更改成分名称的选项。当按下“删除成分”按钮时，无论选择了哪种成分，最后一种成分似乎总是会被删除，但当单击“完成”按钮且可编辑输入框变回文本时，将显示正确的更改，删除正确的成分，并保留最后一种成分。虽然这在功能上是可行的，但它显然对用户界面不是很友好，我想知道为什么会发生这种情况。任何帮助都会很好

---

您的描述非常混乱，根据您的小提琴代码，我认为您的问题是由于没有为列表项设置好键造成的。
从这一行的外观来看，您没有一个key={ingrs[i]}props，请尝试将其设置为id，看看它是否可以工作，但将ingrediant name设置为key可能不是一个好主意，请尝试提供一个实际的id

---

ingrList.push（）您的描述非常混乱，根据您的小提琴代码，我认为您的问题是由于没有为列表项设置好键造成的。

从这一行的外观来看，您没有一个key={ingrs[i]}props，请尝试将其设置为id，看看它是否可以工作，但将ingrediant name设置为key可能不是一个好主意，请尝试提供一个实际的id


ingrList.push（）
您需要将所有数据收集到构造函数方法内的state对象中所有数据都存储在state alreadySorry关于我没有看到jsfiddle链接您需要将所有数据收集到构造函数方法内的state对象所有数据都存储在state alreadySorry关于我没有看到jsfiddlelinkI很抱歉，描述混乱，您可以单击配方名称打开它。我知道
键
道具有助于更有效地对DOM进行反应渲染，但您的解决方案不起作用：（好的，这仍然是一个关键问题，我只是没有太靠近代码，因为我不知道它是如何工作的，在你的情况下，在非常外部的元素上放置一个唯一的键将使它工作，我编辑了我的答案。太棒了，谢谢！添加
键
道具如何工作？以及
id
道具做什么？我不确定react组件是否有id prop、 键有助于识别哪些项已更改、已添加或已删除。应为数组中的元素提供键，以使元素具有稳定的标识。只需确保在每个列表元素中始终有一个好的唯一键。很抱歉，描述不清楚，您可以单击配方名称打开它。我不知道hat
键
道具有助于更有效地对DOM进行反应渲染，但您的解决方案不起作用：（好的，这仍然是一个关键问题，我只是没有太靠近代码，因为我不知道它是如何工作的，在你的情况下，在非常外部的元素上放置一个唯一的键将使它工作，我编辑了我的答案。太棒了，谢谢！添加
键
道具如何工作？以及
id
道具做什么？我不确定react组件是否有id prop、 键有助于识别哪些项已更改、已添加或已删除。应为数组中的元素提供键，以使元素具有稳定的标识。只需确保在每个列表元素中始终有一个好的唯一键
class Input extends React.Component {
  render() {
   const array = this.props.update;
   let booleanButton = null;
   if (this.props.ingr) {
////////////////////////////
// here is the button's JSX
    booleanButton = <button onClick=
    {this.props.handleDeleteIngredient.bind(this, array)}>delete 
    ingredient</button>;
///////////////////////////
   }
 return (<div><form><input type="text" defaultValue={this.props.text} 
   onChange={this.props.onChange.bind(this, array)} /></form>{booleanButton}
  </div>)
  }
}

handleDeleteIngredient(data, e ) {
  var key = data[2];
  var ingrs = this.state.ingrs;
  ingrs.splice(key, 1);
  this.setState({ingrs:ingrs});
}