Table 2删除处理函数（Handler）无法正常工作问题求助

问题现象 #

实现了表单添加数据至Table1，Table1删除数据时将其移至Table2，Table2删除数据时应移回Table1。但删除Table2数据时无法达到预期效果，数据既不消失也不回到Table1。

错误原因 #

查看deleteTableTwoHandler函数，发现过滤数据源时误用了data（Table1的状态）而非dataTwo（Table2的状态）：

const deleteTableTwoHandler = (deleteitem) => {
  // 错误：用data过滤，而非dataTwo
  setDataTwo(data.filter((item) => item !== deleteitem));
  setData((value) => [...value, deleteitem]);
};

这会导致无法正确移除Table2中的目标数据，后续移回Table1的操作也失去意义。

修正方案 #

将setDataTwo中的data.filter替换为dataTwo.filter，同时为了保证状态更新的可靠性，建议所有状态更新都使用函数式更新（避免依赖旧状态快照）：

const deleteTableTwoHandler = (deleteitem) => {
  // 正确过滤Table2的数据源dataTwo
  setDataTwo(prev => prev.filter((item) => item !== deleteitem));
  // 函数式更新Table1状态，确保拿到最新的prev值
  setData((prev) => [...prev, deleteitem]);
};

同时，建议将deleteTableOneHandler也改为函数式更新，保持一致性并避免潜在的状态同步问题：

const deleteTableOneHandler = (deleteitem) => {
  setData(prev => prev.filter((item) => item !== deleteitem));
  setDataTwo((prev) => [...prev, deleteitem]);
};

补充建议 #

另外，在列表渲染时，建议给每个li元素添加唯一的key属性，避免React渲染警告，比如用邮箱作为唯一标识（假设邮箱不重复）：

{data.map((item) => (
  <div key={item.email}>
    <li>
      {item.name} - {item.email} - {item.phoneno}{' '}
      <button onClick={() => deleteTableOneHandler(item)}>
        Delete
      </button>
    </li>
  </div>
))}

Table2的列表渲染同理添加key。

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