React自定义API钩子获取数据可打印但页面不渲染问题求助

可能的原因 #

1. 未导入React的useState钩子 #

你的Home组件中使用了useState但未导入，这会导致setData无法正确触发组件重新渲染。虽然控制台能看到数据，但React无法识别状态更新，因此不会更新UI。

2. UserContext配置不完整 #

如果useUserContext返回的setLoading或setError为undefined，会导致useApi钩子无法正确更新loading状态。虽然不直接影响数据设置，但可能引发组件渲染逻辑异常（比如loading状态持续为true，干扰数据显示）。

3. 状态更新异步特性干扰（少见） #

React状态更新是异步的，若setLoading(false)的更新先于setData(response.user)完成，可能导致组件先以data=null的状态渲染，后续更新被忽略（正常逻辑下该情况极少出现）。

修复步骤 #

步骤1：补全useState导入 #

在Home组件顶部添加useState的导入语句：

import { useState } from 'react'; // 新增这行
import useUserContext from './useUserContext';
import useApi from './useApi';
import { getUSerData } from './api';

步骤2：验证UserContext的Provider配置 #

确保UserContext Provider正确提供setLoading和setError函数，示例配置如下：

// useUserContext.js
import { createContext, useContext, useState } from 'react';

const UserContext = createContext();

export const UserProvider = ({ children }) => {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  return (
    <UserContext.Provider value={{ loading, error, setLoading, setError }}>
      {children}
    </UserContext.Provider>
  );
};

export default function useUserContext() {
  return useContext(UserContext);
}

同时确认UserProvider已包裹Home组件（比如在App.js的根组件中）。

步骤3：调试状态更新（可选） #

若上述步骤无效，可在Home组件中添加useEffect监听data变化，确认状态是否正确更新：

useEffect(() => {
  console.log("Data state updated:", data);
}, [data]);

若控制台能看到data从null变为用户对象，说明状态更新正常，此时需检查UI渲染逻辑是否存在其他干扰（比如CSS隐藏、条件渲染错误）。

步骤4：检查严格模式（可选） #

若开启了React严格模式，它会双重调用部分函数，可能导致状态异常。可暂时移除React.StrictMode标签测试，若恢复正常，再针对严格模式调整代码逻辑。

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