React组件中等待API调用结果并更新渲染列表的实现方法

首先明确核心问题：React 函数组件不能直接标记为 async，async 函数返回的是 Promise 而非可渲染的 JSX 结构，这就是你修改后应用崩溃的根本原因。异步接口数据的获取和渲染需要结合 React 内置的 useState、useEffect Hook 实现。

完整实现代码 #

import * as React from 'react';
const { useState, useEffect } = React;

export default function ChatRoomList({param1}) {
  // 定义状态：聊天室列表、加载状态、错误信息
  const [chatRoomList, setChatRoomList] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 立即执行的异步函数，避免useEffect返回async函数
    (async () => {
      try {
        setLoading(true);
        const adminChats = await getChatRoom(param1);
        // 更新聊天室列表状态
        setChatRoomList(adminChats);
        setError(null);
      } catch (err) {
        setError(err.message || '获取聊天室列表失败');
      } finally {
        setLoading(false);
      }
    })();
  // param1变化时重新触发请求
  }, [param1]);

  // 加载中状态渲染
  if (loading) return <div>加载中...</div>;
  // 错误状态渲染
  if (error) return <div>错误：{error}</div>;

  return  (
    <div>
      <li>{param1}</li>
      {/* 遍历渲染聊天室列表，根据你的返回字段调整渲染内容即可 */}
      {chatRoomList.map(room => (
        <li key={room.id}>
          房间名：{room.roomName} | 创建时间：{room.createTime}
        </li>
      ))}
    </div>
  );
}


async function getChatRoom(status) {
  // status could be either 'open' or 'room'
  const dict = { 
    chatType: status,
  };
  const adminChats = await callKumulosAPIFunction(dict, 'getAdminChat');
  return adminChats;
}

实现关键点 #

• 用useState存储接口返回的聊天室数据，状态更新会触发组件重新渲染，自动更新列表内容
• 用useEffect监听参数param1的变化，参数变更时自动重新拉取对应分类的聊天室数据
• useEffect内部使用立即执行的异步函数发起请求，符合React Hook的使用规范
• 额外增加加载、错误状态的处理，优化用户体验

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