Блог

Я работаю над проектом, в котором

1 — я должен отобразить на экране 50 кругов. 2 — Мои данные передаются в режиме реального времени. данные в виде объекта,в котором я храню {идентификатор:0, цвет:»красный»}. Так,например, если идентификатор в данных реального времени равен {идентификатор:10, цвет:»розовый»}. тогда цвет круга с номером 10 должен быть розовым.для простоты я создаю пользовательский крючок для генерации случайного числа. //randomNumber () — это пользовательский крючок.

   const [random,setRandom]=RandomNumber();
  useEffect(()=>{
    console.log(random);
    if(random>10 amp;amp; random<200)
    {
        setColor("Red")
    }
   else if(random>500)
    {
     setColor("brown")
    }

})
return (
<div className="show-data" onWheel={onWheelHandler}>
{
        

            Array.apply(null, { length: 50 }).map((a, i) => (
             
                pad=="60px"?

                <button className="wave-circle"  style={{backgroundColor:color,padding:pad}}   onMouseOver={onMouseOverHandler}  onClick={onClickHandler} onMouseOut={onMouseLeaveHandle }  key={i}>
                
                {i 1} 
                
                </button>
                :
                <button className="wave-circle"  style={{backgroundColor:color,padding:pad}} value={i 1}   onMouseOver={onMouseOverHandler} onClick={onClickHandler} onMouseOut={onMouseLeaveHandle}  key={i}>
                </button>
        
            ) ,  

            )    
}
 

(1) массив данных «круга» необходимо будет хранить в состоянии, (2) каждый раз при обработке потоковых данных сопоставляйте старый массив с новым массивом и обновляйте конкретный элемент, сопоставляя идентификатор.

Пример:

 function App() {
  const [circles, setCircles] = React.useState(
    Array.from({ length: 50 }, (_, id) => ({
      id,
      color: "red"
    }))
  );

  // Simulate data on interval
  React.useEffect(() => {
    const tick = () => {
      setCircles((circles) => {
        const id = Math.floor(Math.random() * circles.length);
        return circles.map((c) => (c.id === id ? { ...c, color: "brown" } : c));
      });
    };

    const timer = setInterval(tick, 250);

    return () => clearInterval(timer);
  }, []);

  return (
    <div className="App">
      {circles.map(({ id, color }) => (
        <div key={id} className="circle" style={{ backgroundColor: color }} />
      ))}
    </div>
  );
}