React组件中如何将异步函数返回值渲染至scrollbox元素？

当然可以把异步函数返回的Object值整合到React组件中，核心是利用React的状态管理和副作用钩子来处理异步逻辑，避免直接在渲染阶段执行异步操作导致的错误。以下是具体实现方案：

核心思路 #

React组件的渲染是同步过程，异步操作（比如你的follow_render函数）需要放在副作用钩子useEffect中执行，同时用useState存储异步返回的数据、加载状态和错误信息，确保状态更新时组件能重新渲染并展示正确内容。

完整代码示例 #

import { useState, useEffect } from 'react';

// 你的异步函数示例
async function follow_render() {
  // 模拟实际异步操作，比如接口请求、本地存储读取等
  const mockData = await new Promise(resolve => {
    setTimeout(() => {
      resolve({
        userId: 123,
        username: 'react_dev',
        followings: ['userA', 'userB', 'userC'],
        followCount: 3
      });
    }, 1000);
  });
  return mockData;
}

function Following() {
  // 存储异步返回的对象数据
  const [followData, setFollowData] = useState(null);
  // 标记加载状态
  const [isLoading, setIsLoading] = useState(true);
  // 存储错误信息
  const [error, setError] = useState(null);

  useEffect(() => {
    // 封装异步逻辑到内部函数中
    const loadFollowData = async () => {
      try {
        // 调用异步函数获取数据
        const data = await follow_render();
        // 更新状态，触发组件重新渲染
        setFollowData(data);
      } catch (err) {
        // 捕获并存储错误信息
        setError(err.message || '加载关注数据失败');
      } finally {
        // 无论成功或失败，结束加载状态
        setIsLoading(false);
      }
    };

    // 执行异步逻辑
    loadFollowData();

    // 空依赖数组表示仅在组件挂载时执行一次
  }, []);

  // 根据不同状态渲染对应内容
  if (isLoading) {
    return <div className="scrollbox">加载中...</div>;
  }

  if (error) {
    return <div className="scrollbox">出错了：{error}</div>;
  }

  // 渲染异步返回的对象数据（根据你的实际数据结构调整）
  return (
    <div className="scrollbox">
      <h2>我的关注</h2>
      <p>用户名：{followData.username}</p>
      <p>关注总数：{followData.followCount}</p>
      <ul>
        {followData.followings.map((user, index) => (
          <li key={index}>{user}</li>
        ))}
      </ul>
    </div>
  );
}

export default Following;

关键注意事项 #

• 避免直接在渲染阶段调用异步函数：如果直接写const data = follow_render()，得到的是Promise对象而非实际数据，会导致渲染错误。
• 必须处理加载/错误状态：异步操作完成前，followData为初始值（比如null），直接访问其属性会抛出Cannot read properties of null的错误，所以要先判断状态。
• useEffect中不要直接用async函数：如果把useEffect的回调写成async () => {}，会返回Promise，而React期望回调返回清理函数或undefined，可能引发控制台警告，所以要在内部封装异步函数再调用。
• 根据实际数据结构调整渲染逻辑：示例中的followData结构是模拟的，你需要替换成follow_render实际返回的Object属性。

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