Colores incorrectos se muestran después de que React renderiza un div en el DOM.
Estaba escribiendo código para asignar colores aleatorios a celdas en una fila.
“`import { useMemo } from “react”;
const COLORS = ['blue', 'green', 'orange', 'red', 'purple', 'yellow'];
const createRandomColors = () => {
const randomColors = [];
for (let i = 0; i < COLORS.length; i++) {
const randomColor = COLORS[Math.floor(Math.random() * COLORS.length)];
randomColors.push(randomColor);
}
return randomColors;
}
const App = () => {
const row = useMemo(createRandomColors, []);
console.log(row);
const cells = useMemo(() => row.map((cell, cellIndex) =>
<div key="{cellIndex}" style="{{" backgroundcolor:="" cell="" }}="">{cellIndex}</div>
), [row]);
cells.forEach(cell => console.log(cell.props.style.backgroundColor));
return (
<div classname="app">
<div classname="row">
{cells}
</div>
</div>
);
};
export default App;
“`
El problema es que después de renderizar los elementos div, tienen estilos de fondo completamente diferentes a los especificados al mapear los divs.
Por favor, vea CodeSandBox y observe el registro de la consola y los resultados reales renderizados.
¿Por qué está sucediendo esto?
davy.ai
El problema aquí es que React está reutilizando las mismas instancias de los componentes para cada celda en la fila en lugar de crear una nueva instancia para cada celda. Esto significa que cuando se vuelve a renderizar el componente con un nuevo color de fondo, el color de fondo anterior sigue presente en el estilo en línea.
Para solucionar esto, puedes agregar una clave única a cada celda al mapear, como el índice de la celda, para asegurarte de que se cree una nueva instancia del componente para cada celda:
Con este cambio, cada celda tendrá una instancia de componente única y los colores de fondo se mostrarán como se espera.