React中initUsers状态更新后DOM渲染异常问题求助

问题根源 #

• 直接修改React状态变量：Newobj.push()和iteratedUsers.splice()直接操作useState返回的状态数组，React依赖不可变更新检测状态变化，直接修改会导致状态不一致，多次调用后数据积累，渲染出多余行。
• 状态更新异步特性：调用setUsers(Newobj)后状态不会立即更新，后续操作依赖旧状态会引发逻辑错误。
• 渲染Key不唯一：嵌套结构内层使用索引numo作为key，多个外层对象的内层key重复，React Diff算法无法正确识别组件，导致重复渲染。

修正后的代码 #

1. 重构entriesNum函数（避免直接修改状态） #

const entriesNum = (event) => {
  const chunkSize = parseInt(event.target.value, 10);
  // 基于原始users数组创建临时副本，避免污染状态
  const tempUsers = [...users];
  const newNestedArray = [];

  // 循环分割数组，直到临时数组为空
  while (tempUsers.length > 0) {
    const chunk = tempUsers.splice(0, chunkSize);
    // 将chunk转换为要求的对象结构
    const chunkObj = chunk.reduce((obj, user, idx) => {
      obj[idx] = user;
      return obj;
    }, {});
    newNestedArray.push(chunkObj);
  }

  // 一次性更新状态
  setUsers(newNestedArray);
  setIsNewObj(true);
};

说明：不再依赖iteratedUsers状态，每次分割都基于原始users的副本，所有操作在临时变量中完成，确保状态更新的准确性。

2. 修复渲染部分的Key问题 #

{isNewObj ?
  initUsers.map((objUser, outerIdx) => (
    <React.Fragment key={`chunk-${outerIdx}`}>
      {/* 使用Object.entries直接获取键值对，逻辑更直观 */}
      {Object.entries(objUser).map(([_, user]) => (
        <div
          key={user.index} // 使用用户唯一标识index作为key，避免重复
          className="contacts-info border-solid border-2 border-black table-row w-full"
        >
          <input type="checkbox" className={`${shortcut}`} />
          <div className={`${shortcut}`}>{user.index}</div>
          <div className={`${shortcut}`}>{user.email}</div>
          <div className={`${shortcut}`}>{user.access}</div>
        </div>
      ))}
    </React.Fragment>
  )) :
  initUsers.map(({ index, handle, phone, email, access }) => (
    <div
      key={index} // 替换未定义的id为用户唯一的index
      className="contacts-info border-solid border-2 border-black table-row w-full"
    >
      <input type="checkbox" className={`${shortcut}`} />
      <div className={`${shortcut}`}>{index}</div>
      <div className={`${shortcut}`}>{handle}</div>
      <div className={`${shortcut}`}>{phone}</div>
      <div className={`${shortcut}`}>{email}</div>
      <div className={`${shortcut}`}>{access}</div>
    </div>
  ))
}

说明：

• 外层Fragment使用chunk-${outerIdx}作为key，确保每个块的唯一性
• 内层用户行使用user.index作为key，这是用户的唯一标识，避免不同块中索引重复导致的渲染错误
• 扁平结构中替换了未定义的id为index，解决key不存在的问题

额外优化建议 #

• 移除不必要的状态：Newobj和iteratedUsers状态可以完全用函数内的临时变量替代，减少组件状态复杂度。
• 简化结构：如果业务允许，直接使用二维数组存储分割后的用户数据（无需转为对象），渲染时可减少一层对象遍历，提升代码可读性。

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