子组件删除父组件state对象条目正确，但重渲染时错误卸载子组件

看起来你遇到的是React列表渲染里经典的key值问题！咱们一步步拆解原因和解决方案：

问题根源 #

你用this.state.newItems这个对象渲染OrderItem子组件，删除操作能正确更新对象，但重渲染时错误的组件被卸载——这几乎100%是因为没有给列表项设置稳定、唯一的key属性，或者用了不合适的key（比如数组索引）。

React靠key来追踪列表里的每个组件，当数据变化时，它会对比前后的key来判断：哪些组件需要更新，哪些需要被移除。如果key不稳定（比如用索引，删除项后后续项的索引会变）或者重复，React就会错误地复用组件，导致你看到的“删错组件”的假象。

解决方案 #

1. 给OrderItem设置唯一稳定的key

找到每个子项里的唯一标识（比如item自带的id字段），把它作为key传给OrderItem。如果你的newItems对象的键本身就是子项的唯一ID，也可以直接用这个键：

// 用Object.values转成数组渲染的写法
{Object.values(this.state.newItems).map(item => (
  <OrderItem
    key={item.id} // 必须是每个item独有的、不会变化的值
    item={item}
    onDelete={this.handleDelete}
    // 其他props
  />
))}

// 用Object.entries拿到键值对，直接用键当key（如果键是唯一ID的话）
{Object.entries(this.state.newItems).map(([itemId, item]) => (
  <OrderItem
    key={itemId}
    itemId={itemId}
    item={item}
    onDelete={this.handleDelete}
  />
))}

⚠️ 重点提醒：绝对不要用数组索引作为key！尤其是列表有增删操作时，索引会随着项的删除而改变，React会把后面的组件当成被删除的那个，导致错误卸载。

2. 确保state更新是不可变的

虽然你说删除操作能正确更新对象，但还是要确认你是用不可变的方式更新state（直接修改原state会导致React无法检测变化）：

handleDelete = (targetItemId) => {
  this.setState(prevState => {
    // 先复制原对象，再删除目标项
    const updatedItems = {...prevState.newItems};
    delete updatedItems[targetItemId];
    return { newItems: updatedItems };
  });
};

这种方式会创建新的对象，React能准确捕捉到state变化，触发正确的重渲染。

3. 验证key的唯一性

最后要确保你用来当key的值在整个newItems里是唯一的——如果有重复的key，React同样会混淆组件，引发异常。

按这几步调整后，React就能精准识别每个OrderItem，删除操作时只会卸载对应的组件，不会再出现错删的情况了。

内容的提问来源于stack exchange，提问作者Davide Valdo