React排序可视化工具：修改数组中Div样式时props未定义错误

核心问题 #

1. 直接修改React元素props：React元素是不可变对象，直接修改bars[j].props.style.backgroundColor违反了React状态管理规则，即便console.log能看到props，这种操作也不被允许，会引发不可预测的错误。
2. 数组越界：内层循环j的范围是0到bars.length，当j = bars.length - 1时，j+1超出数组长度，此时bars[j+1]为undefined，访问它的props必然报错。
3. 状态更新不规范：直接修改data和bars原数组后调用setData/setBars，这种方式会因React状态更新的异步性，导致状态更新不及时或不一致。

解决方案 #

1. 重构状态结构，存储数据而非React元素

不要把<div>元素存在bars状态里，而是将每个柱状条的高度、颜色数据存在data数组中，渲染时通过map生成柱状条。样式变更只需修改data中的颜色值即可。

2. 修正循环边界，避免越界

冒泡排序的内层循环应遍历到bars.length - i - 1（减少不必要的比较），至少保证j的范围是0到bars.length - 2，防止j+1越界。

3. 使用正确的异步状态更新方式

在异步操作（如sleep）中，基于最新状态副本进行更新，避免使用闭包中的旧状态。

修改后的代码示例 #

const { bars, setBars } = useContext(BarsContext);
// 重构data为包含高度和颜色的对象数组
const [data, setData] = useState([]);

useEffect(() => {
  const newData = [];
  for (let i = 0; i <= value; i++) {
    const randomLength = Math.floor(Math.random() * 500);
    newData.push({
      height: randomLength,
      color: "#add8e6"
    });
  }
  setData(newData);
}, [value]);

const runAlgorithm = () => {
  if (active === "bubble") {
    bubbleSort();
  } else if (active === "merge") {
    Mergsort();
  } else if (active === "selection") {
    Selectionsort();
  }
};

const sleep = ms => new Promise(r => setTimeout(r, ms));

const bubbleSort = async () => {
  // 复制当前数据，避免直接修改原状态
  let currentData = [...data];
  for (let i = 0; i < currentData.length; i++) {
    // 内层循环到length - i -1，减少不必要的比较
    for (let j = 0; j < currentData.length - i - 1; j++) {
      // 1. 将当前比较的两个柱子设为红色
      const updatedData = [...currentData];
      updatedData[j] = { ...updatedData[j], color: "red" };
      updatedData[j+1] = { ...updatedData[j+1], color: "red" };
      setData(updatedData);
      await sleep(100);

      // 2. 比较并交换
      if (currentData[j].height > currentData[j+1].height) {
        [currentData[j], currentData[j+1]] = [currentData[j+1], currentData[j]];
      }

      // 3. 恢复柱子原颜色（已排好序的最后i个除外）
      const resetData = [...currentData];
      if (j !== currentData.length - i - 2) {
        resetData[j] = { ...resetData[j], color: "#add8e6" };
      }
      resetData[j+1] = { ...resetData[j+1], color: "#add8e6" };
      setData(resetData);
      await sleep(100);
    }
    // 标记已排好序的柱子为绿色（可选）
    const finalData = [...currentData];
    finalData[currentData.length - 1 - i] = { ...finalData[currentData.length - 1 - i], color: "green" };
    setData(finalData);
  }
};

// 组件渲染部分示例
return (
  <div className="bars-container">
    {data.map((bar, index) => (
      <div
        key={index}
        className="bar"
        style={{
          height: bar.height,
          backgroundColor: bar.color
        }}
      />
    ))}
    <button onClick={runAlgorithm}>播放</button>
  </div>
);

关键改动说明 #

• 状态存储数据而非元素：data数组存储每个柱子的高度和颜色，渲染时动态生成<div>，样式变更只需更新data状态，符合React状态管理逻辑。
• 避免直接修改props：不再操作React元素的props，通过修改状态中的color值更新样式。
• 修正循环边界：内层循环到currentData.length - i -1，既避免了j+1越界，也优化了冒泡排序的比较次数。
• 异步状态更新：每次状态更新都基于当前的currentData副本，确保状态一致性。

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