React项目中实现50个圆形UI展示及实时数据驱动指定圆形颜色更新的技术咨询

问题出在你当前用了一个单一的color状态变量来控制所有50个圆形的颜色——不管哪个ID的实时数据过来，所有圆形都会读取这个全局的color值，自然会同步变化。要实现按ID单独更新对应圆形颜色，我们需要把状态改成存储每个ID对应颜色的集合，而不是单个值。

具体修改步骤 #

1. 替换全局color状态为多ID颜色状态 #

用useState创建一个对象来存储每个圆形ID对应的颜色，初始可以给所有ID设置一个默认颜色（比如"gray"）：

// 初始化：给ID 1到50（对应你的50个圆形）设置默认颜色
const [circleColors, setCircleColors] = useState(() => {
  const initialColors = {};
  for (let i = 1; i <= 50; i++) {
    initialColors[i] = "gray"; // 默认灰色，可根据需求修改
  }
  return initialColors;
});

2. 处理实时数据的颜色更新 #

当收到格式为{id: number, color: string}的实时数据时，只更新对应ID的颜色。这里结合你现有的RandomNumber钩子，我们可以模拟生成随机的ID和颜色来测试：

const [random, setRandom] = RandomNumber();

useEffect(() => {
  // 模拟实时数据：生成1-50之间的随机ID，随机颜色
  if (random) {
    const targetId = Math.floor(Math.random() * 50) + 1; // 1-50的ID
    const randomColor = ["red", "pink", "brown", "blue", "green"][Math.floor(Math.random() * 5)];
    // 更新对应ID的颜色，不影响其他圆形
    setCircleColors(prev => ({
      ...prev,
      [targetId]: randomColor
    }));
  }
}, [random]);

注意：如果是真实的实时数据流（比如WebSocket），只需要把上面模拟生成targetId和randomColor的部分替换成接收真实数据的逻辑即可。

3. 渲染时给每个圆形绑定对应ID的颜色 #

在渲染每个圆形的时候，不再用全局的color，而是从circleColors中取出当前ID（即i+1）对应的颜色：

return (
  <div className="show-data" onWheel={onWheelHandler}>
    {Array.apply(null, { length: 50 }).map((a, i) => {
      const circleId = i + 1; // 每个圆形的ID是1到50
      const currentColor = circleColors[circleId];
      return pad === "60px" ? (
        <button
          className="wave-circle"
          style={{ backgroundColor: currentColor, padding: pad }}
          onMouseOver={onMouseOverHandler}
          onClick={onClickHandler}
          onMouseOut={onMouseLeaveHandle}
          key={circleId}
        >
          {circleId}
        </button>
      ) : (
        <button
          className="wave-circle"
          style={{ backgroundColor: currentColor, padding: pad }}
          value={circleId}
          onMouseOver={onMouseOverHandler}
          onClick={onClickHandler}
          onMouseOut={onMouseLeaveHandle}
          key={circleId}
        ></button>
      );
    })}
  </div>
);

修改后的完整代码 #

import { useState, useEffect } from "react";
// 假设你的RandomNumber钩子已经正确导入

const YourComponent = () => {
  // 初始化每个圆形ID的颜色状态
  const [circleColors, setCircleColors] = useState(() => {
    const initialColors = {};
    for (let i = 1; i <= 50; i++) {
      initialColors[i] = "gray";
    }
    return initialColors;
  });
  const [random, setRandom] = RandomNumber();
  // 这里假设pad和各种handler已经定义，可根据实际逻辑调整
  const pad = "60px";
  const onWheelHandler = () => {};
  const onMouseOverHandler = () => {};
  const onClickHandler = () => {};
  const onMouseLeaveHandle = () => {};

  useEffect(() => {
    if (random) {
      // 模拟实时数据：生成随机ID和颜色
      const targetId = Math.floor(Math.random() * 50) + 1;
      const randomColor = ["red", "pink", "brown", "blue", "green"][Math.floor(Math.random() * 5)];
      // 仅更新对应ID的颜色
      setCircleColors(prev => ({
        ...prev,
        [targetId]: randomColor
      }));
    }
  }, [random]);

  return (
    <div className="show-data" onWheel={onWheelHandler}>
      {Array.apply(null, { length: 50 }).map((a, i) => {
        const circleId = i + 1;
        const currentColor = circleColors[circleId];
        return pad === "60px" ? (
          <button
            className="wave-circle"
            style={{ backgroundColor: currentColor, padding: pad }}
            onMouseOver={onMouseOverHandler}
            onClick={onClickHandler}
            onMouseOut={onMouseLeaveHandle}
            key={circleId}
          >
            {circleId}
          </button>
        ) : (
          <button
            className="wave-circle"
            style={{ backgroundColor: currentColor, padding: pad }}
            value={circleId}
            onMouseOver={onMouseOverHandler}
            onClick={onClickHandler}
            onMouseOut={onMouseLeaveHandle}
            key={circleId}
          ></button>
        );
      })}
    </div>
  );
};

export default YourComponent;

这样修改后，每个圆形的颜色都会独立存储和更新，当收到指定ID的实时数据时，只有对应ID的圆形会改变颜色，其他圆形不受影响。

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