En mi aplicación create-react-app, creé un objeto usando el gancho useState en App.js que paso como argumento a 5 instancias diferentes del mismo componente. Este objeto contiene 5 arreglos diferentes bajo nombres de propiedad de números simples (por lo que es fácil iterarlo con un bucle for).
const [ listObj, setListObj ] = useState({ 0: [], 1: [], 2: [], 3: [], 4: [] });Cada componente mantiene y modifica una y solo una de esas matrices (correspondiente a su número, por lo que el componente 0 solo modifica el componente 0, 1 solo modifica 1, etc.), y uso funciones para iterar sobre listObj y las matrices internas para poder comparar sus contenidos.
Cada uno de estos componentes tiene un número de componente único (0-4) que se les pasa a través de App.js, y un enlace useEffect que se parece a esto en cada uno cada vez que desean actualizar su matriz específica:
useEffect(() => { let newArray = functionToGenerateSortedArrays(); let newListObj = { ...listObj, [ componentNumber ]: newArray }; setListObj( newListObj ); }, [ (all my state objects that trigger useEffect) ])Esto funciona muy bien cuando solo estoy actualizando algo relacionado con un componente a la vez. El problema es que hay una funcionalidad en la aplicación donde todos los componentes deben actualizarse al mismo tiempo. Parece que cada uno tomará una copia "antigua" de listObj, la usará para crear un newListObj con la información actualizada, luego llamará a setListObj con newListObj, sobrescribiendo así los cambios que los otros componentes intentaron hacer. La única matriz listObj que se actualiza correctamente es la última de la fila.
Me consideré terriblemente inteligente cuando traté de implementar esta solución hacky:
useEffect(() => { let newArray = functionToGenerateSortedArrays(); setTimeout(() => { let newListObj = { ...listObj, [ componentNumber ]: newArray }; setListObj( newListObj ); }, componentNumber * 100 ); }, [ (all my state objects that trigger useEffect) ])Sin embargo, esto no funciona. En realidad, cambia la matriz en listObj al valor que quiero instantáneamente , pero vuelve al valor incorrecto después de que se activa el tiempo de espera. No tengo idea de por qué, pero me encantaría entenderlo si alguien tiene alguna idea. Pensé que tal vez podría estar relacionado con la forma en que React "agrupa" las actualizaciones de estado, pero no pude encontrar ninguna información sobre cómo evitar que React lo haga para poder probar mi hipótesis.
¿Tengo alguna opción para cambiar los valores de la matriz en listObj en forma de "cascada" para que no interfieran entre sí? ¿Existe quizás otra forma de guardar y actualizar el estado que no cree este problema? Muchas gracias por tu tiempo.
Aquí es donde tenemos el formulario de devolución de llamada de actualización de estado del setter del gancho useState :
useEffect(() => { let newArray = functionToGenerateSortedArrays(); setListObj(currentListObj => { // ^^^^^^^^^^^^^^ let newListObj = { ...currentListObj, [ componentNumber ]: newArray }; return newListObj; }); }, [ (all my state objects that trigger useEffect) ])De esa forma, incluso cuando todas las funciones de actualización se agrupan, recibirán el valor actual en lugar de utilizar el valor obsoleto que la función de efecto había cerrado.