如何解决React Hook条件调用报错，实现条件状态更新？

触发这个报错的核心是两点规则的叠加：

1. React Hooks的ESLint校验规则约定：所有函数名以use开头的代码，都会被识别为自定义Hook，这类Hook必须在组件的顶层作用域无条件调用，不能被if分支、循环、嵌套逻辑包裹。因为React是靠Hook的调用顺序匹配对应状态的，一旦某个Hook被条件分支跳过，后续所有Hook的位置都会错位，直接引发状态混乱。
2. 你把原本作为状态更新器的函数命名为了usePoints/useCounter/useQuiz，又把这些调用放在了if判断分支内部，直接触发了条件调用Hook的校验报错。

这里需要厘清一个常见误区：只有Hook本身（比如useState、useEffect这类用于声明状态、副作用的Hook调用）需要遵守顶层无条件调用的规则。Hook返回的状态更新函数（比如useState返回的第二个返回值）只是普通函数，不管在事件回调的哪个分支、什么条件下调用，都是完全合法的，根本不受Hook调用规则的约束。

1. 修正命名规范 #

把所有状态更新函数的命名从useXxx改成React社区通用的setXxx格式，从根源上避免被ESLint误判为需要顶层调用的Hook。比如组件顶层的状态声明部分应该是这样：

// 注意：这部分属于Hook本身的调用，必须放在组件顶层，不能放在任何分支里
const [points, setPoints] = useState(0);
const [counter, setCounter] = useState(0);
const [currentQuiz, setCurrentQuiz] = useState(quizArr[0]);

2. 修正事件回调的实现 #

调整答题触发的逻辑，注意两个容易踩的坑：一是不要直接依赖闭包里捕获的旧状态值做自增运算，二是普通setState函数在条件分支里调用没有任何问题：

const ChangeQuiz = (e) => {
  // 判断当前选中的选项是否为正确答案
  if (e.target.innerHTML === quiz.Correct) {
    // 用函数式更新获取最新的得分状态，避免闭包捕获旧值导致的更新失效
    setPoints(prevPoints => prevPoints + 1);
    toEnd = true;
  }
  // 计数器累加，同样用函数式更新拿到最新值后同步更新题目
  setCounter(prevCounter => {
    const nextIndex = prevCounter + 1;
    setCurrentQuiz(quizArr[nextIndex]);
    return nextIndex;
  });
}

• 绝对不要把Hook本身（也就是useState/useEffect这类以use开头的Hook调用）放在if、循环、事件回调的分支逻辑里，否则一定会触发条件调用Hook的报错
• 不要给普通的工具函数、状态更新函数起use开头的名字，否则ESLint会强行按照Hook的规则校验，平白触发不必要的报错
• 涉及到基于旧状态做更新的逻辑（比如得分累加、计数器自增），优先用函数式更新的写法，也就是给setState传prevState => 新状态的回调，避免因为闭包捕获旧值导致的更新不生效问题
• 注意变量拼写一致性，原代码里的qizArr是拼写错误，和之前定义的quizArr不一致，会触发未定义引用的错误

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