React待办应用删除项提交新项后复现问题求助

核心问题分析 #

• 父子组件状态不同步+删除逻辑参数错误：Items组件删除后向父组件传递的是整个删除后的数组，但父组件的删除处理函数期望接收单个被删除项的id，导致父组件的数组过滤逻辑完全失效——delData.id为undefined，过滤后返回原数组，父组件的数据源根本没更新，新增待办时自然会带上旧数据。
• 用数组index作为key的风险：删除项后数组索引重排，React会复用旧组件实例，可能引发UI渲染异常。

具体修复步骤 #

1. 修正删除逻辑的参数传递 #

修改Items组件的deleteHandler，向父组件传递被删除的具体项，而非整个数组：

// Items.js - deleteHandler 改造
const deleteHandler = (val) => {
  const deletedItem = listData[val]; // 获取被删除的项
  deletedDataToPr(deletedItem); // 传递单个项给父组件
  setSelected(null);
};

2. 修正父组件的过滤逻辑 #

确保父组件能正确接收被删除项并过滤数组：

// App.js - dataAftrDelInPar 改造
const dataAftrDelInPar = (deletedItem) => {
  const updatedFormData = formData.filter((item) => item.id !== deletedItem.id);
  setInitFormData(updatedFormData);
};

3. 移除Items组件的冗余状态，保持单一数据源 #

Items组件不需要维护自己的frmValue状态，直接用父组件传递的listData，彻底避免状态不同步：

// Items.js 移除以下冗余代码：
const [frmValue, setFrmVal] = useState(listData);
useEffect(() => {
  setFrmVal(listData);
}, [listData]);

// 所有用到frmValue的地方替换为listData，同时修改编辑逻辑：
// 先给Items组件新增更新数据的回调props
// App.js里的Items组件：
<Items 
  listData={formData} 
  deletedDataToPr={dataAftrDelInPar}
  updateDataToPr={(updatedList) => setInitFormData(updatedList)}
/>

// Items.js的editFrmSave改造：
const editFrmSave = (saveFrmVal) => {
  const updatedData = [...listData];
  updatedData[saveFrmVal] = updatedFrmRef.current.value;
  updateDataToPr(updatedData); // 通知父组件更新数据源
  setUpdateInp(null);
};

4. 使用唯一id作为列表项的key #

替换index为待办项的id作为React元素的key，避免索引重排导致的UI异常：

// Items.js 列表渲染部分改造
{listData.map((currEl, index) => (
  <div
    className="justify-between flex items-center rounded-md bg-blue-50 my-3 px-2 py-2 ring-1 ring-inset ring-blue-700/10"
    key={currEl.id} // 用item的唯一id作为key
  >
    {/* 其余内容不变 */}
  </div>
))}

额外说明 #

尽量让父组件维护唯一的数据源，子组件只负责渲染和触发状态变更的回调，这样所有操作（新增、删除、编辑）都会基于最新的状态执行，彻底避免状态不同步问题。

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