React调用API时组件渲染阶段数据未就绪报错问题

我在React应用中遇到API返回的数据在组件渲染时无法正常访问的问题。我使用async/await语法发起API请求，但仍出现报错。我采用Axios进行API调用，并用Axios-Mock-Adapter模拟响应。

简化代码示例如下：

App.js #

const [data, setData] = useState();

const MainContext = createContext({
  data: {},
});

useEffect(() => {
  const getPosts = async () => {
    const response = await axios.get("/mockedEndpoint");
    setData(response.data);
  };

  getPosts();
}, []);

return (
  <MainContext.Provider value={data}>
    <MyComponent />
  </MainContext.Provider>
);

MyComponent.jsx #

const data = useContext(MainContext);
console.log("data", data); // 先打印空对象，随后打印正确数据
console.log("data", data.user); // 该行会触发报错（user稍后会存在）

我是否忽略了什么关键点？是否需要在MyComponent.jsx中以不同方式处理data？我原以为使用async函数getPosts就能在组件中访问API返回值。

1. 修正初始值不匹配问题 #

你在useState()未设置初始值，默认是undefined，但createContext的默认值是{data: {}}，初始渲染时data为undefined，访问data.user自然会报错。给useState设置和Context对齐的初始值：

const [data, setData] = useState({});

2. 处理异步渲染的时机问题 #

API请求是异步操作，组件会先以初始值渲染，等请求完成后才会更新data。你需要在MyComponent中处理数据未加载完成的状态：

• 条件渲染：先判断数据是否存在，再渲染内容

  if (!data.user) {
    return <div>加载中...</div>;
  }
  return <div>{data.user.name}</div>;
  

• 可选链操作符：用?.安全访问嵌套属性，避免报错

  console.log("data", data?.user);
  

3. 统一Context的数据结构 #

你创建的MainContext默认值是{data: {}}，但实际传给Provider的是data（API返回的对象），结构不一致容易导致混淆。建议保持Context结构统一：

// App.js中修改Provider的值
<MainContext.Provider value={{ data }}>
  <MyComponent />
</MainContext.Provider>

// MyComponent中调整取值方式
const { data } = useContext(MainContext);

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