React Context Provider：Consumer中调用异步函数无返回值问题

你的代码存在两个关键问题导致无法渲染内容：

1. 箭头函数语法错误 #

getProfile.then(profile) => { 这里的参数缺少括号，正确写法应该是 getProfile.then((profile) => {。但即使修正语法，核心问题依然存在。

2. React无法渲染异步返回的内容 #

React组件的渲染函数（包括Context Consumer的回调）必须同步返回React元素，而你当前的写法是在Promise的回调里返回JSX，这个返回值不会被React识别——因为Consumer的回调函数本身需要直接返回可渲染的内容，而非异步操作的回调。

修复方案 #

需要用状态管理异步获取的数据，结合useState和useEffect来处理异步请求：

方案1：使用useContext（推荐） #

import { useState, useEffect, useContext } from 'react';
// 假设你的Context是UserContext
import UserContext from './UserContext';

const App = () => {
  const [profile, setProfile] = useState(null);
  const { getProfile } = useContext(UserContext);

  useEffect(() => {
    // 封装异步请求
    const fetchProfile = async () => {
      const profileData = await getProfile();
      setProfile(profileData);
    };
    fetchProfile();
  }, [getProfile]); // 依赖getProfile，确保其变化时重新请求

  return (
    <>
      <Header />
      {profile && <h3>{profile.name}</h3>}
    </>
  );
};

方案2：保留Consumer写法 #

如果坚持使用UserConsumer，需要将状态逻辑放在内部组件中：

import { useState, useEffect } from 'react';

const ProfileDisplay = () => {
  const [profile, setProfile] = useState(null);

  return (
    <UserConsumer>
      {({ getProfile }) => {
        useEffect(() => {
          // 发起异步请求并更新状态
          getProfile().then(setProfile);
        }, [getProfile]);

        return profile && <h3>{profile.name}</h3>;
      }}
    </UserConsumer>
  );
};

const App = () => {
  return (
    <>
      <Header />
      <ProfileDisplay />
    </>
  );
};

原理说明 #

通过useState存储异步获取的profile数据，useEffect在组件挂载或依赖项变化时触发异步请求。当getProfile返回Promise并resolve后，调用setProfile更新状态，React会感知到状态变化并重新渲染组件，此时就能正常显示profile内容。

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