React CRUD应用删除后Table不重渲染及Key警告问题

问题1：删除操作后Table组件不重新渲染 #

你在deleteHandler里用splice直接修改了原数组，React依赖状态的引用变化触发重渲染。直接修改原数组后，即使调用updateState，状态的引用没改变，React会判定数据未更新，因此Table不会重新渲染。

修复方式：创建原数组的副本，在副本上执行删除操作，再将新数组传入状态更新函数：

const deleteHandler = (id) => {
  // 创建数组副本，避免修改原状态
  const updatedUsers = [...props.users].filter(user => user.id !== id);
  props.updateState(updatedUsers);
};

这里用扩展运算符[...props.users]创建副本，再通过filter过滤掉目标用户，比splice更简洁，也符合React不可变状态的设计原则。

问题2：Key属性警告 #

你给<tr>加了key，但外层嵌套了空片段<>...</>，React要求key必须放在循环渲染的最外层元素上。另外，用数组索引作为key不是最优方案（删除元素后索引会变动，可能引发渲染异常），应该使用用户的唯一标识user.id作为key。

修复后的渲染代码：

{props.users &&
  props.users.map((user) => {
    return (
      <tr key={user.id}> {/* 把key放在tr上，用user.id替代索引 */}
        <td>{user.id}</td>
        <td>{user.name}</td>
        <td>{user.email}</td>
        <td>{user.phone}</td>
        <td>
          <button style={{ backgroundColor: 'green' }}>Edit</button>
          <button style={{ backgroundColor: 'red' }} onClick={() => deleteHandler(user.id)}>
            Delete
          </button>
        </td>
      </tr>
    );
  })}

移除多余的空片段，直接返回<tr>，并将key设置为user.id，既解决警告，也能提升渲染性能。

额外优化建议：App组件中useState的初始值可以设为空数组useState([])，避免props.users为undefined时的潜在报错。

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