React useState数组异常：length显示4但展开有6个，map仅识别4个

问题本质 #

你遇到的是浏览器控制台惰性求值特性导致的视觉误导：

• 控制台打印数组时，会先记录当前的length值，但不会立即展开所有元素；
• 当你点击展开时，控制台会重新读取数组的当前实际值，若数组在打印后被直接修改过，就会出现length显示4但展开后有6个元素的情况；
• 而map遍历只识别到4个元素，说明你传给useState的数组确实只有4个，后续元素是直接修改数组（而非通过setState更新状态）加上去的，React没感知到这次修改，组件渲染时仍用旧状态。

解决步骤 #

1. 禁止直接修改状态数组
   React状态是不可变的，永远不要用push/pop/splice这类直接修改原数组的方法，必须创建新数组再更新状态：

// 错误写法：直接修改原数组
tempArr.push(newItem);
setMyState(tempArr);

// 正确写法：创建新数组
const newArr = [...tempArr, newItem];
setMyState(newArr);

2. 排查数组修改时机
   检查是否存在「给useState赋值后，又直接修改同一个数组变量」的情况：

// 错误示例：赋值后继续修改原数组
const tempArr = [];
// 循环添加4个元素
for (let i = 0; i < 4; i++) {
  tempArr.push({ id: i });
}
setMyState(tempArr);
// 直接修改tempArr但未更新状态
tempArr.push({ id: 4 }, { id: 5 });

这种情况下，控制台展开时会显示修改后的6个元素，但useState保存的还是最初的4个，所以map遍历只显示4个。

3. 确保用最终数组更新状态
   所有元素添加完成后，再将最终数组传给setState，避免后续修改原变量：

const tempArr = [];
// 循环添加元素
for (let i = 0; i < 4; i++) {
  tempArr.push({ id: i });
}
// 添加其他条件的元素
if (someCondition) {
  tempArr.push({ id: 4 }, { id: 5 });
}
// 所有元素添加完成后更新状态
setMyState([...tempArr]);

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