React中异步映射JSX遇报错：Unexpected reserved word 'await'

核心错误原因 #

1. await 关键字只能在 async 标记的函数内部使用，你直接在组件渲染逻辑或非异步函数里使用它，导致语法报错。
2. podcastList = podcast_list() 得到的是一个 Promise 对象，不是实际的数组数据，直接对它执行 map 操作本身就不符合逻辑。
3. Promise.all 在这里完全多余——ListItem 是同步组件，不存在需要等待的异步任务，不需要用它来处理组件渲染。

正确实现代码 #

我们用 React 的状态管理（useState）和副作用钩子（useEffect）来处理异步数据的获取与渲染，这是 React 中处理异步数据的标准方式：

import { useState, useEffect } from 'react';

// 列表项组件保持不变
function ListItem(props) {
  return <li>{props.value}</li>;
}

// 异步获取数据的函数保持不变
async function podcast_list() {
  const headers = { 'Content-Type': 'application/json' };
  const res = await fetch('/list_podcasts', { method: 'GET', headers });
  return await res.json();
}

// 主列表组件
function PodcastList() {
  // 用状态存储获取到的列表数据，初始为空数组
  const [podcastList, setPodcastList] = useState([]);
  // 加载状态与错误状态，提升用户体验
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // 组件挂载时执行异步数据获取
  useEffect(() => {
    // 定义内部异步函数（useEffect 回调不能直接是 async 函数）
    const fetchPodcasts = async () => {
      try {
        const data = await podcast_list();
        setPodcastList(data); // 将获取到的数据存入状态
      } catch (err) {
        setError(err.message); // 捕获并存储错误信息
      } finally {
        setLoading(false); // 无论成功失败，结束加载状态
      }
    };

    fetchPodcasts();
  }, []); // 空依赖数组：仅在组件首次挂载时执行一次

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

  // 数据就绪后渲染列表
  return (
    <ul>
      {podcastList.map((podcast, index) => (
        <ListItem 
          key={index} // React 列表渲染必须添加唯一 key 属性
          value={podcast} 
        />
      ))}
    </ul>
  );
}

export default PodcastList;

关键修改说明 #

• 状态管理：用 useState 存储列表数据、加载状态和错误信息，数据更新时组件会自动重新渲染。
• 副作用处理：用 useEffect 在组件挂载时触发异步数据获取，避免在组件渲染阶段执行异步操作。
• 移除冗余代码：删掉不必要的 Promise.all，直接用状态中的数组执行 map 渲染组件。
• 边界情况处理：添加加载中和错误状态的渲染，避免用户看到空白或异常界面。

内容的提问来源于stack exchange，提问作者An old man in the sea.