Tengo el siguiente componente, que no se vuelve a representar cuando se actualiza el estado, aunque los valores del estado se usan dentro de los componentes secundarios y los values se actualizan correctamente.
import Paper from "@mui/material/Paper"; import React, {useState} from "react"; import Grid from "@mui/material/Grid"; import Knob from "./Knob"; export default function Knobs({knobSettings}) { const [values, setValues] = useState({0: 0, 1: 0, 2: 0, 3: 0, 4: 0, 5: 0}); console.log("render"); const updateValue = (index, value) => { const localValues = values; localValues[index] = value; setValues(localValues); console.log(localValues, values) }; const item = (index) => ( <Grid item xs={1}> <Knob bipolar={knobSettings[index].bi} max={knobSettings[index].max} value={values[index]} onValueChange={(value) => updateValue(index, value)} /> </Grid> ); return ( <Paper> <Grid container columns={3}> {item(0)} {item(1)} {item(2)} {item(3)} {item(4)} {item(5)} </Grid> </Paper> ); } Cuando se maneja el estado dentro de las knob mismas, todo funciona bien, pero necesito el estado más arriba y parece romperse aquí. ¿Se debe a la forma en que genero los item ? Preferiría no tener que copiar el mismo código 6 veces (ya que todavía está cambiando), entonces, ¿cuál sería la mejor manera de manejar esto?
(¿Y es posible usar una matriz en el estado en lugar de un objeto con índices? Actualizar matrices siempre es un poco complicado).
cambiar esta linea
const localValues = values;a esto :
const localValues = [...values]; No se está actualizando porque está dando la misma referencia a setValues .
Prefiero no tener que copiar el mismo código 6 veces
Puede mapear sobre los elementos de esta manera:
<Paper> <Grid container columns={3}> {values.map((item, index) => item(index))} </Grid> </Paper> Alternativamente, si la longitud de los values no está necesariamente directamente relacionada con la cantidad de elementos, esto se puede convertir en un bucle for simple, etc.
React no hace una comparación profunda. Entonces, cuando actualice el componente de reacción del valor clave del objeto, no se volverá a procesar. No verá la actualización en la interfaz de usuario.
Puedes resolver esto como a continuación.
const updateValue = (index, value) => { setValues((pre) => ({ ...pre, [index]: value })); };