React useState管理数组时新增缺项、删除元素结果异常问题排查

你碰到的两个异常都和数组操作逻辑无关，核心是React函数组件的两个特性：状态更新异步批处理、渲染闭包捕获固定状态值。

• 新增后打印拿不到最新值：React的setState不会同步修改当前作用域里的状态变量，所有状态更新会被批处理，等下一次组件重渲染时才会生成新的状态值。你在调用新增函数的当前渲染周期里读mcqAnswerList，读到的永远是这次渲染时捕获的旧值，第一次新增时初始状态是空数组，自然打印出空数组。
• 删除时拿到的数组不符合预期：不管是新增时传给子组件的mcqAnswerList，还是删除函数里读取的mcqAnswerList，都是对应渲染周期闭包里的固定值。如果回调函数捕获的是旧渲染周期的闭包，就会出现读不到最新数组、删第一个元素直接拿到空数组、删最后一个元素缺项的问题。另外你当前的新增逻辑直接拿外层闭包的mcqAnswerList做concat，在连续触发新增、多状态批处理更新的场景下，也会因为拿到旧状态导致新增元素丢失。

所有依赖上一次状态的更新逻辑，都用React提供的函数式更新写法，从更新回调的参数里拿保证最新的状态值，完全避开闭包旧值问题。

1. 修正新增逻辑：

const [mcqAnswerList, setMcqAnswerList] = useState<any[]>([]);
const handleCreateMcqQuestion = () => {
  setMcqAnswerList(prev => {
    // prev 是React保证的、当前最新的状态值，不受闭包影响
    const newAnswerItem = {
      question: (
        <McqQuestion
          key={ids}
          good={ids}
          mcqAnswerList={prev}
          setMcqAnswerList={setMcqAnswerList}
        />
      ),
      id: ids,
    };
    return prev.concat(newAnswerItem);
  });
};

2. 修正删除逻辑，不要在函数里直接读外层的mcqAnswerList：

const handleDeleteMcqQuestion = (targetId: any) => {
  setMcqAnswerList(prev => prev.filter(item => item.id !== targetId));
};

• 不要在调用setState之后立刻同步读取状态值，此时拿到的一定是旧值。如果需要在状态更新后执行逻辑，用useEffect监听对应状态变化即可。
• 不推荐把JSX元素直接存在state里，state里只存渲染需要的纯数据（比如题目id、选项内容这类可序列化的数据），JSX内容在组件渲染阶段根据state数据动态生成，能从根源上避免很多闭包、引用不一致的问题。

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