React中addItem函数报错：存在重复key值问题求助

问题现象 #

触发addItem函数时出现以下警告：

警告：遇到两个拥有相同key的子元素，[object Object]1。key应保持唯一，以确保组件在更新时维持自身标识。非唯一key可能导致子元素重复或被省略——此行为不受支持，未来版本可能变更。

问题原因 #

1. addItem函数的ID生成错误：
   原代码中items[items.length - 1]取的是数组最后一个完整对象，而非对象的id属性。当执行+1时，对象会被强制转为字符串[object Object]，最终生成的ID为[object Object]1，多次调用或与其他逻辑冲突时会出现重复Key。

2. 直接修改React State：
   addItem2和deleteItem函数中直接修改了this.state的原数组（items.push(item)、items.splice(i, 1)），违反了React State不可直接修改的原则，可能导致状态更新异常。

修复方案 #

1. 修复addItem函数

修正ID生成逻辑，同时为新增项补充默认属性避免渲染异常：

addItem = () => {
  const { items } = this.state;
  // 正确获取最后一项的ID并递增
  const id = items.length ? items[items.length - 1].id + 1 : 1;
  // 补充product和price默认值，防止渲染undefined
  this.setState({ items: [...items, { id, product: '', price: 0 }] });
};

2. 修复addItem2函数

通过扩展运算符创建新数组和新对象，避免直接修改原State：

addItem2 = (item) => {
  const { items } = this.state;
  const newId = items.length ? items[items.length - 1].id + 1 : 1;
  // 不修改传入的item，创建新对象并赋值ID
  const newItem = { ...item, id: newId };
  // 生成新数组更新State
  this.setState({ items: [...items, newItem] });
};

3. 修复deleteItem函数

改用filter生成新数组，符合React State更新规范：

deleteItem = (id) => {
  const newItems = this.state.items.filter(item => item.id !== id);
  this.setState({ items: newItems });
};

验证 #

修复后，新增项的ID会按数字递增（1、2、3...），保证Key唯一，重复Key警告会消失；同时State更新符合React的不可变原则，避免潜在的状态异常问题。

内容的提问来源于stack exchange，提问作者mai mohamed