React中使用Promise.all获取API数据，状态更新仅显单图问题求助

问题根源 #

• 状态更新逻辑错误：你初始将arrData定义为数组，但每次调用setArrData(data.results[0].picture.large)时，是直接把单个字符串URL赋值给状态，覆盖了之前的值，两次请求后最终只保留了最后一次的URL。
• 渲染逻辑不完整：代码里仅写了一个<img>标签，即便状态是数组也只会显示第一个元素（当状态被覆盖为字符串时则显示最后一个），没有遍历数组渲染所有图片。

修复方案 #

1. 批量处理请求并更新状态

不要在单个请求回调里单独更新状态，而是通过Promise.all一次性处理所有请求的解析逻辑，收集所有图片URL后再统一更新状态，避免多次覆盖。

2. 遍历数组渲染所有图片

在JSX中使用map方法遍历arrData数组，为每个URL生成对应的<img>标签。

修复后的完整代码 #

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [arrData, setArrData] = useState([]);
  
  const fetchApi = () => {
    // 整合请求与JSON解析的Promise，一次性处理
    Promise.all([
      fetch("https://randomuser.me/api").then(res => res.json()),
      fetch("https://randomuser.me/api").then(res => res.json())
    ])
    .then(results => {
      // 提取所有图片URL组成数组
      const imageUrls = results.map(data => data.results[0].picture.large);
      setArrData(imageUrls);
      console.log(imageUrls);
    })
    .catch(err => console.error(err)); // 保留错误日志，方便调试
  };
  
  return (
    <div className="App">
      <button onClick={fetchApi}>Fetch</button>
      <div>
        {/* 遍历数组渲染所有图片，添加唯一key标识 */}
        {arrData.map((url, index) => (
          <img key={index} src={url} alt={`random-user-${index}`} />
        ))}
      </div>
    </div>
  );
}

关键改动说明 #

• 把fetch和res.json()的逻辑整合到Promise.all中，避免嵌套回调，代码更简洁易读。
• 用map提取所有图片URL生成数组，一次性调用setArrData更新状态，彻底解决覆盖问题。
• 渲染时通过map遍历数组生成图片，每个<img>添加唯一key（实际项目中建议使用数据的唯一ID替代index）。
• 增加错误捕获日志，便于排查请求异常。

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