React useState为何无法更新值？循环抓SWAPI数据触发无限循环

无限循环无法终止的核心原因 #

• 代码在空依赖的useEffect中调用getData，整个函数作用域捕获的是组件首次渲染时的变量快照：循环判断条件while(link)中的link从函数启动开始就固定为初始值https://swapi.dev/api/people/，不会随setLink的调用发生实时变化
• React的状态更新是异步调度的，setLink(jsonData.next)只会把更新任务推入渲染队列，不会在同步执行的while循环里立刻修改闭包捕获的link变量值，导致循环判断条件永远为真，哪怕接口已经返回最后一页的next: null，循环也无法正常触发退出逻辑
• 分页请求的临时地址本身不需要驱动页面渲染，完全没必要存在组件状态里，把流程临时变量和需要触发渲染的状态混在一起，是触发闭包陷阱的典型原因

页面无内容渲染的核心原因 #

• 状态更新逻辑存在两处bug：
  1. 同样受闭包影响，setCharacterData([...characterData, jsonData.results])中引用的characterData永远是首次渲染的空数组快照，每次状态更新的参考值完全错误
  2. 代码直接把整页的results数组作为单个元素塞入新数组，最终得到的characterData是多层嵌套结构：[ [第一页人物对象列表], [第二页人物对象列表], ... ]，并非预期的扁平人物对象数组
• 原有渲染逻辑直接对嵌套结构做map时，拿到的每一项character都是一整页的人物数组，根本不是带name、birth_year属性的单个人物对象，自然无法渲染出有效内容

修正后的可运行实现 #

const [characterData, setCharacterData] = useState([]);

useEffect(() => {
  const fetchAllCharacters = async () => {
    // 用局部变量追踪分页地址，不依赖组件状态，规避闭包问题
    let currentPageUrl = "https://swapi.dev/api/people/";
    // 用临时数组存储所有拉取到的人物数据，全量拉取完成后再统一更新状态
    const allFetchedCharacters = [];

    // 循环判断直接基于局部变量，不依赖React状态
    while (currentPageUrl) {
      const response = await fetch(currentPageUrl);
      const pageData = await response.json();
      // 将当前页的人物对象平铺追加到临时数组
      allFetchedCharacters.push(...pageData.results);
      // 用接口返回的next字段更新局部变量，控制循环退出
      currentPageUrl = pageData.next;
    }

    // 全量数据拉取完成后，一次性更新状态触发页面渲染
    setCharacterData(allFetchedCharacters);
  };

  fetchAllCharacters();
}, []);

修正数据结构后，你原有的人物列表渲染逻辑可以直接正常运行，不需要额外调整。

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