如何解决React中useEffect调用setResults触发的Hooks顺序错误问题

React 组件必须在每次渲染时保持 Hooks 的调用数量、调用顺序完全一致，这是 Hooks 的核心规则。你遇到的报错本质不是 setResults 本身存在问题，而是调用 setResults 触发组件重渲染后，新的渲染流程中 Hooks 调用顺序和上一次不一致。
从控制台的错误对比可以看到：上一次渲染的第14个Hook是useContext，第二次渲染的第14个Hook变成了useEffect，说明重渲染时，第13个useMemo之后的Hook要么被条件判断跳过了调用，要么新增了额外的Hook调用。
删除setResults后报错消失的原因是：没有状态更新触发重渲染，React 不会比对两次渲染的Hook顺序，自然不会抛出错误。
最常见的触发场景是：你在组件内写了提前返回的逻辑（比如加载状态判断），且提前返回的位置放在了部分Hook声明之前，当加载状态变化时，后面的Hook被跳过调用，直接导致顺序错乱。

1. 调整组件内代码顺序，把所有Hook调用（useState/useEffect/useContext/useMemo等）全部放到组件逻辑的最顶部，确保不管任何渲染条件，所有Hook都会被按顺序完整调用，不会被提前返回或者条件判断跳过。
   反例：

// 错误写法：提前返回逻辑放在部分Hook之前
const [loading, setLoading] = useState(false)
if (loading) {
  return <Loading />
}
// 当loading为true时，这个useEffect不会被调用，Hook顺序错乱
useEffect(() => {
  // 逻辑
}, [])

正确写法：

const [loading, setLoading] = useState(false)
// 所有Hook都声明完成后再写提前返回逻辑
useEffect(() => {
  // 逻辑
}, [])
if (loading) {
  return <Loading />
}

2. 排查组件内是否存在条件调用Hook的情况，比如将Hook写在if判断分支中，只有满足条件才会执行，这种写法也会导致Hook数量/顺序变化，必须全部调整为顶层调用。
3. 额外优化：你当前代码中的 axios 取消令牌没有实际生效，创建的ourRequest没有传给请求配置，组件卸载后请求返回仍会调用状态更新方法触发内存泄露警告，可以将取消令牌作为参数传入fetchHandler的请求配置中。

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