He inicializado un estado que es una matriz, y cuando lo actualizo, mi componente no se vuelve a procesar. Aquí hay una prueba de concepto mínima:
function App() { const [numbers, setNumbers] = React.useState([0, 1, 2, 3]); console.log("rendering..."); return ( <div className="App"> {numbers.map(number => ( <p>{number}</p> ))} <input type="text" value={numbers[0].toString()} onChange={newText => { let old = numbers; old[0] = 1; setNumbers(old); }} /> </div> ); }Según este código, parece que la entrada debe contener el número 0 para comenzar, y cada vez que se cambia, el estado también debe cambiar. Después de ingresar "02" en la entrada, el componente de la aplicación no se vuelve a procesar. Sin embargo, si agrego un setTimeout en la función onChange que se ejecuta después de 5 segundos, muestra que los números se han actualizado.
¿Alguna idea de por qué el componente no se actualiza?
Aquí hay un CodeSandbox con la prueba de concepto.
Está llamando a setNumbers y pasándole la matriz que ya tiene. Ha cambiado uno de sus valores, pero sigue siendo la misma matriz, y sospecho que React no ve ninguna razón para volver a renderizar porque el estado no ha cambiado; la nueva matriz es la matriz anterior.
Una forma sencilla de evitar esto es distribuir la matriz en una nueva matriz:
setNumbers([...old])Necesitas copiar numbers como let old = [...numbers];
useState no actualiza el valor solo si ha cambiado, por lo que si era 44 y se convirtió en 7 , se actualizará. pero ¿cómo puede saber si una matriz u objeto ha cambiado? es por referencia, por lo que cuando let old = numbers solo estás pasando una referencia y no creando una nueva
Otros ya han dado la solución técnica. Para cualquier persona confundida sobre por qué sucede esto, es porque setSomething() solo vuelve a representar el componente si y solo si el estado anterior y el actual son diferentes. Dado que las matrices en javascript son tipos de referencia, si edita un elemento de una matriz en js, aún no cambia la referencia a la matriz original. A los ojos de js, estas dos matrices son iguales, aunque el contenido original dentro de esas matrices sea diferente. Es por eso que setSomething() falla al detectar los cambios realizados en la matriz anterior.
Tenga en cuenta que si usa componentes de clase y actualiza el estado usando setState(), el componente siempre se actualizará independientemente de si el estado ha cambiado o no. Entonces, puede cambiar su componente funcional a un componente de clase como solución. O siga las respuestas proporcionadas por otros.