Tengo una variable useState que contiene datos de registro y estoy mostrando esos datos usando .map() , en algún momento en particular, se agregarán registros, y tomo la variable anterior y vuelvo a afectar el nuevo valor de la siguiente manera:
const [logs, setLogs] = useState([]) const function1 = () => { // some process here setLogs(myValues) } const function2 = () => { // some process let myNewValues = logs // some other process setLogs(myNewValues) } La función .map() muestra los logs correctamente después de la primera función, pero cuando actualizo los registros con setLogs en la segunda función, .map() no recibe la actualización, muestra los valores antiguos de la función 1.
¿Cómo puedo arreglar esto en reaccionar?
¡Gracias de antemano!
Me parece que puede estar mutando de estado, en lugar de pasar un nuevo estado.
En lugar de mutar la matriz de registros y luego llamar a setState con la misma referencia de matriz, intente distribuir los nuevos valores en un nuevo objeto de matriz y luego llame a setState.
const function2 = () => { let myNewValues = logs; setLogs([...myNewValues]); };Cuando se llama a setState, React mira las referencias del objeto y ve que recibió la misma referencia de matriz, y luego no vuelve a renderizar. Al pasar una nueva matriz, React ve que el estado ha cambiado y se volverá a procesar en consecuencia.