React中用JSX的.map()同时展示多个异步API请求数据

核心思路 #

将原有的异步请求逻辑迁移到React的useEffect钩子中，通过useState管理数据、加载状态与错误信息，最后利用map()遍历API返回的数据，生成对应JSX元素渲染到页面。

完整实现代码 #

import { useState, useEffect } from 'react';

function ChuckNorrisJokes() {
  // 状态管理：存储笑话数据、加载状态、错误信息
  const [jokes, setJokes] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [errors, setErrors] = useState([]);

  useEffect(() => {
    const fetchJokes = async () => {
      try {
        const urls = [
          "https://api.chucknorris.io/jokes/random",
          "https://api.chucknorris.io/jokes/random",
          "https://api.chucknorris.io/jokes/random",
          "https://api.chucknorris.io/jokes/random",
        ];

        // 批量发起API请求
        const requests = urls.map(url => fetch(url));
        const responses = await Promise.all(requests);

        // 筛选出请求失败的响应
        const errorResponses = responses.filter(res => !res.ok);
        if (errorResponses.length > 0) {
          throw errorResponses.map(res => new Error(`${res.status}: ${res.statusText}`));
        }

        // 解析所有响应的JSON数据
        const dataPromises = responses.map(res => res.json());
        const jokeData = await Promise.all(dataPromises);

        // 更新状态存储获取到的笑话数据
        setJokes(jokeData);
      } catch (errs) {
        // 捕获错误并更新错误状态
        setErrors(errs);
      } finally {
        // 无论请求成功或失败，结束加载状态
        setIsLoading(false);
      }
    };

    fetchJokes();
  }, []); // 空依赖数组确保仅在组件挂载时执行一次请求

  // 加载状态下的UI展示
  if (isLoading) {
    return <div>加载中...</div>;
  }

  // 错误状态下的UI展示
  if (errors.length > 0) {
    return (
      <div className="errors">
        <h3>请求出错：</h3>
        <ul>
          {errors.map((err, index) => (
            <li key={index}>{err.message}</li>
          ))}
        </ul>
      </div>
    );
  }

  // 成功获取数据后，用map()遍历渲染笑话卡片
  return (
    <div className="jokes-container">
      <h2>Chuck Norris 随机笑话</h2>
      <div className="jokes-list">
        {jokes.map((joke, index) => (
          <div key={index} className="joke-card">
            <img src={joke.icon_url} alt="Chuck Norris 图标" />
            <p>{joke.value}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

export default ChuckNorrisJokes;

关键细节说明 #

• 状态管理：使用useState分别维护jokes（存储API返回的笑话数据）、isLoading（控制加载提示显示）、errors（存储请求错误信息），确保UI能随状态变化自动更新。
• useEffect钩子：异步请求逻辑包裹在useEffect内，空依赖数组[]保证请求仅在组件首次挂载时执行，避免不必要的重复请求。
• 错误处理：不仅捕获代码运行时错误，还筛选出HTTP状态码非2xx的响应，将错误信息存入状态，便于在页面直观展示。
• map()渲染：遍历jokes数组时，为每个元素设置唯一key属性（示例用索引，生产环境优先使用数据自带的唯一ID），将每个笑话渲染为包含图标和内容的卡片组件。

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