在高阶组件HOC中访问Redux状态时无法使用useSelector问题求助

错误原因 #

你的报错是因为违反了React Hook的调用规则。useSelector属于React Hook，仅允许在React函数组件的顶层作用域或者自定义Hook内部调用，你当前直接在HOC的外层函数（接收组件参数的isFavorited函数）中调用useSelector，该函数执行时不属于组件渲染上下文，因此触发报错。

修正方案 #

将Hook调用和判断逻辑都移到HOC返回的新组件内部，调整后代码如下：

import { useSelector, useDispatch } from 'react-redux';

const isFavorited = (Component) => {
  // 返回的函数才是React组件，仅此处允许调用Hook
  return (props) => {
    const url = "URL"; // 若需要动态获取当前路由，对应的路由Hook也放在此处调用
    const count = useSelector((state) => state.favourite.value);

    if (count === 1 || url === "url") {
      return <Component {...props} />;
    }
    return <span>No render</span>;
  };
};

const CardLong = isFavorited((props) => {
  const count = useSelector((state) => state.favourite.value);
  const dispatch = useDispatch();
  return (
    // 你的JSX内容
  );
});

export default CardLong;

注意事项 #

• 所有React相关Hook（包括Redux的useSelector、useDispatch，路由的useLocation等）都必须放在函数组件的顶层，不允许放在条件判断、循环、普通工具函数中
• HOC本质是接收组件、返回新组件的工厂函数，只有最终返回的组件函数体内部，才是符合Hook调用要求的上下文

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