如何避免Hook调用顺序错误，按需使用useSelect获取Store数据？

问题描述 #

核心场景 #

我需要从Store的不同资源中获取数据，为了逻辑清晰用switch语句处理，但type随用户输入变化时，触发了“Hook调用顺序改变”的错误。代码示例：

....

// 仅作演示
switch (type){
    case 'foo':
        const data = useSelect( (select) => select(MY_STORE).getFoo(), []);
    break;

    case 'bar':
        const data = useSelect( (select) => select(MY_STORE).getFoo(), []);
    break;

    case 'zoo':
        const data = useSelect( (select) => select(MY_STORE).getZoo(), []);
    break;
}

....

需求是：仅在实际需要时获取对应服务端数据，不首次渲染就请求所有端点，同时避免Hook顺序错误。

补充疑问 #

是否只能用一个useSelect？比如这样写：

const data = useSelect((select) => {
    case 'foo':
        return select(MY_STORE).getFoo();
    break;

    case 'bar':
        return select(MY_STORE).getFoo();
    break;

    case 'zoo':
        return select(MY_STORE).getZoo();
    break;
});

补充日志 #

控制台输出如下：

------------------------------------------------------
1. useRef                     useRef
2. useContext                 useContext
3. useContext                 useContext
4. useMemo                    useMemo
5. useCallback                useCallback
6. useSyncExternalStore       useSyncExternalStore
7. useDebugValue              useDebugValue
8. undefined                  useRef
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

这是不是说明问题不是来自useSelect？

解决方案 #

1. 原代码报错的原因 #

React Hook有硬性规则：每次渲染时，Hook的调用顺序必须完全一致。你把useSelect放在switch分支里，当type变化时，不同分支会导致有的渲染调用了useSelect，有的没调用，直接违反Hook规则触发报错，这就是问题根源。

2. 正确写法：单useSelect内部分支判断 #

你的补充思路是对的，必须用单个useSelect调用，在其内部根据type分支返回对应数据。注意修正语法（switch需要包裹在函数体内）：

const data = useSelect((select) => {
  const store = select(MY_STORE);
  switch (type) {
    case 'foo':
      return store.getFoo();
    case 'bar':
      return store.getBar(); // 注：你示例里写了getFoo，应该是笔误
    case 'zoo':
      return store.getZoo();
    default:
      return null; // 必须处理默认情况，避免无返回值
  }
}, [type]); // 依赖数组加入type，确保type变化时重新计算数据

这样既保证useSelect每次渲染都被调用（符合Hook规则），又能根据当前type只获取对应数据，不会一次性请求所有端点。

3. 关于控制台日志的分析 #

日志里第8项显示undefined对应useRef，说明你的组件里某个useRef的调用位置违反了Hook规则——比如它被放在了条件判断、循环或者嵌套函数里，和useSelect无关。你需要检查组件中所有Hook的调用位置，确保它们都在组件顶层，没有被任何条件逻辑包裹。

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