Redux无效钩子调用问题：如何在select的onChange中触发action？

你遇到的「无效钩子调用」错误，核心原因是**useSelector是React Hook，必须在React组件或自定义Hook的顶层作用域调用**，不能在Redux的异步action（thunk函数）内部使用——你的fetchProducts函数是一个thunk，里面直接调用useSelector违反了Hook规则。

另外你调用fetchProducts(dispatch)的方式也有误，Redux-Thunk中间件会自动把dispatch和getState作为参数传给thunk函数，不需要手动传递。

方法一：在组件中获取状态后传入thunk #

1. 修改组件中的onChange和状态获取逻辑 #

在组件顶层调用useSelector获取需要的状态，再在onChange中把参数传给fetchProducts：

const MyComponent = () => {
  const dispatch = useDispatch();
  // 组件顶层调用useSelector，符合Hook规则
  const categoryId = useSelector(store => store.product.categoryId);
  const filter = useSelector(store => store.product.filter);

  const onChange = (evnt) => {
    const selectedSort = evnt.target.value;
    dispatch(setSort(selectedSort));
    // 将需要的状态作为参数传入fetchProducts
    dispatch(fetchProducts(categoryId, filter, selectedSort));
  };

  return (
    <select
      onChange={onChange}
      className="border-[1px] p-4 bg-[#F9F9F9]"
    >
      <option>Sort</option>
      {/* 其他选项 */}
    </select>
  );
};

2. 修改fetchProducts action #

接收组件传入的参数，不再使用useSelector：

export const fetchProducts = (categoryId, filter, sort) => async (dispatch) => {
  dispatch(setFetchState("FETCHING"));

  let query = "/products";
  // 直接使用传入的参数构建请求逻辑
  // ...后续请求代码
};

方法二：在thunk中通过getState获取store状态 #

Redux-Thunk的thunk函数可以接收第二个参数getState，用来直接获取当前的store状态，无需在组件中传递参数：

1. 修改fetchProducts action #

export const fetchProducts = () => async (dispatch, getState) => {
  dispatch(setFetchState("FETCHING"));

  // 通过getState获取store中的状态，替代useSelector
  const { categoryId, filter, sort } = getState().product;

  let query = "/products";
  // ...后续请求代码
};

2. 修改组件中的onChange逻辑 #

直接调用fetchProducts即可，不需要传递参数：

const onChange = (evnt) => {
  dispatch(setSort(evnt.target.value));
  // 无需手动传dispatch，Thunk中间件会自动注入
  dispatch(fetchProducts());
};

• 确保你的Redux store已经正确配置了Redux-Thunk中间件，否则异步action无法正常执行。
• 所有React Hook（包括useSelector、useDispatch）必须在组件或自定义Hook的顶层作用域调用，不能嵌套在事件处理函数、循环、条件判断中。

内容的提问来源于stack exchange，提问作者Münir BESYE