如何解决API调用响应时React组件状态被重新初始化的问题？

嘿，你的问题不是useEffect导致的，而是React状态更新中的「闭包陷阱」在搞事情！

为什么会出现这种异常？ #

在testRunner函数里，你每次用setOutput([...output, ${item}: ${res.data.result}])更新状态时，output其实是函数执行那一刻的旧状态快照——也就是你刚设置的["Running tests..."]。因为循环里的await是异步操作，等API响应回来时，函数里的output变量并没有更新成最新的状态，所以每次添加新结果都是在旧数组上做修改，自然没法累积所有测试结果。

至于API响应后出现["Let's run a test...", "test result"]，是因为当异步操作延迟时，可能意外捕获到了组件挂载时的初始状态，但核心问题还是闭包导致的状态更新不连贯。

怎么修复？ #

解决这个问题的关键是使用函数式状态更新——给setOutput传一个函数，这个函数会自动接收当前最新的状态作为参数，确保每次更新都是基于最新的数组：

const testRunner = async () => {
  // 先重置为测试运行中的初始提示
  setOutput(["Running tests..."]);
  for (const item of selectedItemTypes) {
    const payload = { "itemPrefix": item, "testFunction": selectedTestFunctions };
    try {
      const res = await apis.testRunner(payload);
      // 用函数式更新，基于最新状态追加结果
      setOutput(prevOutput => [...prevOutput, `${item}: ${res.data.result}`]);
    } catch (error) {
      // 别忘了加错误处理，避免单个测试失败中断整个流程
      setOutput(prevOutput => [...prevOutput, `${item}: 测试失败 - ${error.message}`]);
    }
  }
}

额外提示 #

• 你的useEffect初始化逻辑完全没问题，它只在组件首次挂载时执行一次，设置初始提示文本，不会干扰后续的测试流程。
• 加上try/catch能让测试更健壮，某个测试接口出错时，依然能把错误信息输出到列表里，而不是直接崩溃。

这样修改后，每次添加测试结果都会基于最新的output数组累积，最终就能得到你想要的["Running tests...", "test result 1", "test result 2", ...]效果啦！

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