使用自定义useAxios Hook出现Rendered more hooks报错如何解决？

你遇到的报错违反了React Hook的核心规则：同一组件每次渲染调用的Hook数量和顺序必须完全一致。
结合代码和报错日志，直接原因是 renderItems 普通函数内部调用了React Hook：

• 当 loading 或 error 为真时，触发提前返回，renderItems 没有执行，其内部的Hook也不会被调用
• 当请求完成后，没有触发提前返回，renderItems 执行，内部的Hook被调用，导致两次渲染的Hook数量不一致，触发报错
  你原本的提前返回逻辑本身位置是合规的（所有顶层Hook调用完成后才判断返回），不属于错误来源。

方案1：将renderItems改造为标准React组件 #

把函数调用改为组件调用，组件内部的Hook归组件自身管理，不会影响父组件的Hook调用顺序：

// 原来的renderItems改造为组件
export const RenderItems = ({ columns, data }) => {
  // 原renderItems的内部逻辑，包括内部的Hook调用
}

业务组件中使用方式改为：

<RenderItems columns={accountsListColumns} data={response} />

方案2：把renderItems内部的Hook全部提到父组件顶层 #

如果不想改造为组件，将renderItems里用到的所有Hook都移到SingleAccountPage的最顶层调用，通过参数传递给renderItems使用，保证父组件每次渲染的Hook数量一致。

可选优化：修复useAxios的依赖缺失问题 #

你当前的useAxios实现存在参数变化后不重新请求的潜在问题，修改useEffect的依赖即可修复：

useEffect(() => {
  // 将fetchData移到useEffect内部避免额外依赖
  const fetchData = async (params) => {
    try {
      const result = await axios.request(params);
      setResponse(result.data);
    } catch (err) {
      setError(err);
    } finally {
      setLoading(false);
    }
  };
  fetchData(axiosParams);
}, [axiosParams, ...deps]);

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