React中如何将多次API调用结果迭代存入useState数组并解决卡顿异常

• 无限循环：你把Person放到了useEffect的依赖数组中，每次调用SetInfo更新Person都会重新触发useEffect执行，再次发起6个API请求，循环往复，自然会导致页面卡顿甚至崩溃
• 状态更新逻辑错误：代码中状态变量定义为大写开头的Person，但更新时用的是小写的person，变量名不匹配会导致取值报错；同时每次请求返回就单独更新状态，频繁触发重渲染，还会因为闭包问题拿到旧的状态值，导致最终存储的数据不全或错乱
• 初始值冗余：初始的Person数组里预设了一个空的人员对象，后续新增数据后这个空对象会一直保留在数组首位，不属于你需要的有效数据

优化思路：把所有请求用Promise.all批量处理，全部请求完成后一次性更新状态，useEffect依赖改为空数组只在组件挂载时执行一次，同时增加错误处理和请求取消逻辑避免内存泄漏

import { useState, useEffect } from 'react';

function API_CALL() {
  // 初始值设为空数组，不需要预设无效的空对象
  const [Person, SetInfo] = useState([]);
  const names = ["bob", "alice", "jerry", "steve", "tracy", "hank"];

  useEffect(() => {
    const controller = new AbortController();
    const signal = controller.signal;

    // 批量生成所有请求的Promise
    const requestList = names.map(name => 
      fetch(`https://api.userfacesite.com/api/v3/data/${name}`, {
        headers: {
          'Accept': 'application/json',
          'Path': '/',
        },
        signal
      })
      .then(response => response.json())
      .then(json => ({
        age: json.person.age,
        occupation: json.person.occupation
      }))
      .catch(err => {
        // 单个请求错误兼容，避免一个请求失败导致所有数据加载失败
        console.log(`获取${name}的信息失败:`, err);
        return { age: '未知', occupation: '未知' };
      })
    );

    // 等待所有请求完成后一次性更新状态，仅触发一次重渲染
    Promise.all(requestList).then(personList => {
      SetInfo(personList);
    });

    // 组件卸载时取消未完成的请求，避免内存泄漏和更新警告
    return () => controller.abort();
  }, []); // 依赖为空数组，仅组件挂载时执行一次

  return (
    <div>
      {JSON.stringify(Person)}
    </div>
  )
}

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