调用handleClick内setResultArr后React视图不更新问题排查

核心问题原因 #

• 直接修改原数组引用：你一直在修改steps原数组，然后把同一个数组引用传给setResultArr。React的状态更新依赖引用变化触发重渲染，引用未改变时，React会判定状态无更新，因此不会刷新视图。
• 循环变量声明问题：用var声明循环变量i会引发变量提升，异步操作完成后i的值可能超出数组长度，虽不是视图不更新的主因，但会导致其他潜在异常。
• 状态更新未基于最新值：异步API调用期间状态可能已变化，直接传入steps会覆盖中间状态，导致更新不准确。

修复步骤 #

1. 避免修改原数组，每次更新生成新数组副本
   不要直接修改steps内的项，而是通过复制数组并修改对应项的方式，生成新数组传给setResultArr。
2. 用let替代var声明循环变量
   解决变量提升导致的异步操作后索引异常问题。
3. 使用函数式更新确保基于最新状态
   异步操作后更新状态时，采用setResultArr(prevState => ...)的形式，确保每次更新都基于最新状态值，避免状态覆盖。

修改后的完整代码 #

const [resultArr, setResultArr] = useState<Execution[]>(() => [...steps]); // 初始化时复制steps，避免直接引用原数组

const steps: Execution[] = [
  {
    tag: "Service provider creation",
    function: WebRTCDemoService.createServiceProvider,
    working: false,
  },
  // 其他步骤...
]

const handleClick = async () => {
  for (let i = 0; i < resultArr.length; i++) {
    // 标记当前步骤为执行中，创建新数组
    setResultArr(prev => prev.map((item, idx) => 
      idx === i ? {...item, working: true} : item
    ));

    // 调用API获取结果
    const result = await steps[i].function();

    // 更新步骤结果，创建新数组
    setResultArr(prev => prev.map((item, idx) => 
      idx === i ? {...item, working: false, result} : item
    ));
  }
};

return (
  <Flex direction="column">
    <Divider orientation="horizontal" />
    <Button onClick={handleClick}>Start</Button>
    <Expander type="multiple">
      {resultArr.map((item, index) => (
        <ExpanderItem
          title={<CustomTitle working={item.working} tag={item.tag} />}
          value={`item-${index}`}
          key={index} {/* 添加key属性，符合React列表渲染规范 */}
        >
          {JSON.stringify(item?.result)}
        </ExpanderItem>
      ))}
    </Expander>
  </Flex>
);

额外说明 #

• 初始化状态时用() => [...steps]是为了创建原数组的副本，避免后续操作影响初始值。
• 给ExpanderItem添加key属性，避免React列表渲染警告，同时提升渲染性能。

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