Next.js React复选框点击报错：TypeError: Cannot read properties of undefined (reading 'id')

错误原因 #

报错根源是pageData.currentThreads[index]为undefined，无法读取id属性，主要有以下几种触发场景：

• 初始状态未初始化：pageData初始值中currentThreads未设为空数组，在useEffect执行前，pageData.currentThreads是undefined，点击复选框时访问对应索引会直接报错。
• 闭包捕获旧状态：React状态更新是异步的，setCheckedThread的回调函数中捕获的pageData可能是旧的状态值，此时currentThreads还未完成更新。
• 索引不匹配：渲染复选框时使用的index与当前currentThreads的长度不匹配（比如分页后数据更新，但索引未同步），导致访问不存在的数组元素。

解决方案 #

1. 初始化pageData的默认值 #

确保pageData初始状态中currentThreads为空数组，避免初始阶段出现undefined：

const [pageData, setPageData] = useState({
  currentPage: 1,
  currentThreads: [],
  totalPages: 0,
  totalThreads: 0
});

2. 直接传递线程ID而非依赖索引 #

修改复选框的事件处理逻辑，直接传递当前线程的id，彻底避免通过index从pageData中取值的风险：

{pageData.currentThreads.map((thread) => (
  <div key={thread.id}>
    <input
      type="checkbox"
      onChange={() => handleToggleCheck(thread.id)}
      checked={checkedThread.has(thread.id)}
    />
    <span>{thread.title}</span>
  </div>
))}

对应的处理函数：

const handleToggleCheck = (threadId) => {
  setCheckedThread(prev => {
    const newCheckedSet = new Set(prev);
    if (newCheckedSet.has(threadId)) {
      newCheckedSet.delete(threadId);
    } else {
      newCheckedSet.add(threadId);
    }
    return newCheckedSet;
  });
};

3. 确保useEffect依赖正确 #

检查useEffect的依赖数组，确保只有当相关依赖变化时才更新pageData，避免不必要的状态更新导致数据不一致：

useEffect(() => {
  const totalPages = Math.ceil(threadsDataJSON.threads.total / 10);
  setPageData({
    currentPage: threadsDataJSON.threads.current_page,
    currentThreads: threadsDataJSON.threads.data,
    totalPages: totalPages,
    totalThreads: threadsDataJSON.threads.total,
  });
}, []); // 如果threadsDataJSON是静态数据，依赖数组为空即可

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