React中如何循环请求数据并存储到状态数组中

核心问题分析 #

• 你用普通变量final存储数据，但React不会监听普通变量的变化，数据更新后组件不会重新渲染，页面无法显示结果。
• fetch请求参数格式错误：payload直接放在配置对象里无效，需要放入body并转为JSON字符串，同时要设置正确的请求方法和请求头，否则后端无法正确接收参数。
• 异步时机错误：console.log(final)在函数执行后立即调用，此时final里都是未完成的Promise，不是最终返回的数据。
• 重复请求问题：每次点击按钮都会往final里追加新的Promise，导致多次重复发起相同请求。

修正后的代码 #

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

function Temp2() {
  const payloadArray = [9837, 5021, 162, 7553]; // 注意：0162是八进制数，会被解析为十进制114，直接写162避免异常
  const [finalData, setFinalData] = useState([]); // 用React状态存储数据，触发组件重渲染

  const fetchNewArray = async () => {
    // 每次请求前清空数据，避免重复累加
    setFinalData([]);
    
    // 用map生成Promise数组，替代forEach更简洁
    const promiseArray = payloadArray.map((payload) => 
      fetch("API URL", {
        method: "POST", // 根据后端要求设置请求方法，比如GET/POST
        headers: {
          "Content-Type": "application/json", // 告诉后端请求体是JSON格式
        },
        body: JSON.stringify({ payload }) // 将payload转为JSON字符串放入请求体
      })
      .then((res) => {
        // 先检查请求是否成功
        if (!res.ok) throw new Error(`请求失败：${res.status}`);
        return res.json();
      })
      .then((json) => json.data.toString())
      .catch((err) => {
        // 单个请求失败时的容错处理，不影响其他请求
        console.error(err);
        return `获取失败：${payload}`;
      })
    );

    // 等待所有请求完成，拿到最终结果数组
    const results = await Promise.all(promiseArray);
    // 更新状态，触发组件重新渲染
    setFinalData(results);
  };

  return (
    <div>
      <header className="App-header">
        <button onClick={fetchNewArray}>GET VALUES</button>
        {/* 渲染状态中的数据 */}
        {finalData.map((e, i) => (
          <p key={i}>{e}</p>
        ))}
      </header>
    </div>
  );
}

export default Temp2;

关键修改说明 #

• 使用React状态管理：通过useState创建finalData状态变量，更新状态时React会自动触发组件重渲染，页面就能实时显示最新数据。
• 修正fetch请求格式：根据后端接口要求设置请求方法，添加Content-Type请求头，将payload转为JSON字符串放入请求体，确保后端能正确解析参数。
• 优化异步逻辑：用async/await替代纯链式then调用，代码可读性更高；添加错误捕获，单个请求失败不会导致全部请求失效。
• 避免重复请求：每次点击按钮先清空状态，再发起新请求，防止数据重复累加。
• 修复数值格式问题：将0162改为162，避免JavaScript将其解析为八进制数导致的数值异常。

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