React开发：如何通过自定义id正确删除state数组中的指定对象

问题原因 #

你代码里有3处逻辑错误导致拿不到自定义id、删除功能失效：

1. Array.map()的第二个参数固定为数组元素的索引，你将这个参数命名为id，拿到的自然是索引值，你存的自定义id在每个数组元素的item.id属性里。
2. 文本框的onChange逻辑错误，直接把文本值赋值给了textMaster，覆盖了原本的对象结构，导致id字段丢失。
3. 新增内容后没有重置textMaster，后续新增的所有内容都会复用同一个id。

具体修改方案 #

1. 修复文本框 onChange 逻辑

原代码直接覆盖了整个textMaster对象，需要保留id字段，只更新段落内容：

// 错误写法
onChange={(e) => setTextMaster(e.target.value)}
// 正确写法
onChange={(e) => setTextMaster({...textMaster, paragraph: e.target.value})}

2. 修复列表渲染和删除传参逻辑

渲染列表时从item中取自定义id作为key、作为删除方法的入参，同时取paragraph字段展示内容：

// 错误写法
{text.map((item, id) => {
  return (
    <>
      <li key={id}>{item}</li>
      <button onClick={() => handleClickDelete(id)}>Delete</button>
    </>
  );
})}

// 正确写法
{text.map((item) => {
  return (
    <React.Fragment key={item.id}>
      <li>{item.paragraph}</li>
      <button onClick={() => handleClickDelete(item.id)}>Delete</button>
    </React.Fragment>
  );
})}

3. 新增内容后重置输入模板

在handleSubmit方法末尾新增重置逻辑，保证每次新增内容都生成新的id：

const handleSubmit = (e) => {
  e.preventDefault();
  const copy = [...text];
  copy.push(textMaster);
  setText(copy);
  // 新增重置逻辑
  setTextMaster({
    paragraph: "",
    id: nanoid()
  })
};

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