React Hooks setState调用异常：移除数组元素时状态不稳定

你在removeFromQuestionArray函数中违反了React状态不可变的核心原则，导致状态更新异常：

• let a = prevState.questions是直接引用原state中的questions数组，而非创建新数组副本。
• 调用a.pop()时，直接修改了原state里的数组（因为引用指向同一内存地址），这会干扰React对状态变化的追踪机制。
• React依赖状态的引用变更来触发正确的重新渲染和状态更新，直接修改原状态会导致更新逻辑混乱，出现数组被意外清空的异常情况。

以下几种方法都能安全实现移除数组最后一项的功能，核心都是创建新数组而非修改原数组：

方法1：使用slice创建新数组（最简洁推荐） #

slice方法返回原数组的浅拷贝，不会修改原数组，通过slice(0, -1)直接获取除最后一项外的所有元素：

const removeFromQuestionArray = () => {
  setAppState((prevState) => ({
    ...prevState,
    questions: prevState.questions.slice(0, -1)
  }));
};

方法2：展开数组后操作新数组 #

先通过展开运算符[...prevState.questions]创建原数组的副本，再对副本执行pop操作：

const removeFromQuestionArray = () => {
  setAppState((prevState) => {
    const newQuestions = [...prevState.questions];
    newQuestions.pop();
    return {
      ...prevState,
      questions: newQuestions
    };
  });
};

方法3：使用filter过滤最后一项 #

通过索引判断，保留除最后一个元素外的所有项：

const removeFromQuestionArray = () => {
  setAppState((prevState) => ({
    ...prevState,
    questions: prevState.questions.filter((_, idx) => idx !== prevState.questions.length - 1)
  }));
};

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