React中数组排序后调用useState未触发组件重新渲染问题

问题原因 #

• 你的Visual组件仅返回了按钮，没有渲染list状态对应的数组内容，所以即使状态更新，页面上也看不到变化
• setBubbleSort的位置缩进错误，被放在了两层for循环之外，排序全程只会在所有排序逻辑执行完后触发一次状态更新，如果需要做排序过程可视化，需要把状态更新放到交换逻辑后，同时要处理同步循环中React批量合并更新的问题
• 你把Visual组件直接定义在App组件内部，每次App重渲染都会导致Visual被重新创建为新组件，原有状态会丢失，建议把组件抽离到外部避免嵌套定义

修复方案 #

1. 在组件返回值中添加数组渲染逻辑，把list的内容展示到页面上
2. 调整状态更新的调用逻辑，如果需要查看排序动画效果，用定时器/requestAnimationFrame处理每一步的更新，避免同步循环中多次setState被React合并
3. 把Visual组件从App内部抽离，通过props传递初始数组，避免嵌套组件导致的状态异常

修复后的完整代码如下：

import React, { useState } from "react";

// 组件抽离到外部，避免嵌套定义
const Visual = ({ initialList }) => {
  const [list, setList] = useState(initialList);

  const bubbleSort = () => {
    const newArray = [...list];
    const n = newArray.length;
    let delay = 0;
    for (let i = 0; i < n; i++) {
      for (let j = 0; j < n - i - 1; j++) {
        if (newArray[j] > newArray[j + 1]) {
          // 交换元素
          [newArray[j], newArray[j + 1]] = [newArray[j + 1], newArray[j]];
          // 每次交换后延迟更新状态，避免批量更新合并
          setTimeout(() => {
            setList([...newArray]);
          }, delay);
          delay += 300;
        }
      }
    }
  };

  return (
    <div>
      {/* 渲染数组内容，状态更新后页面会自动刷新 */}
      <div>{list.join(", ")}</div>
      <button onClick={bubbleSort}>Click me</button>
    </div>
  );
};

const App = () => {
  const bubble = [9, 8, 6, 5, 3, 1];
  return <Visual initialList={bubble} />;
};

export default App;

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