import { useEffect, useState } from "react"; export default function App() { const [criteria, setCriteria] = useState({}); const handleCriteriaChange = (values) => { // setCriteria(prevCriteria => ({ // ...prevCriteria, // ...values // })) setCriteria({ ...criteria, ...values }); }; useEffect(() => { setTimeout(() => { handleCriteriaChange({ courses: ["calculus", "psychology"] }); }, 1000); setTimeout(() => { handleCriteriaChange({ type: "manual" }); }, 5000); setTimeout(() => { handleCriteriaChange({ termLengths: [14, 7] }); }, 10000); // eslint-disable-next-line }, []); console.log({ criteria: JSON.stringify(criteria) }); return ( <div className="App"> <h1>Hello CodeSandbox {JSON.stringify(criteria)}</h1> <h2>Start editing to see some magic happen!</h2> </div> ); }Agregué una lógica para actualizar el objeto de estado con diferentes claves en un intervalo de 5 segundos entre cada actualización. Y esperaba que todos los valores clave aparecieran en el objeto de estado, pero solo se muestra la última actualización de estado. ¿Por qué no puedo obtener toda la clave agregada: valores? Incluso si hay un procesamiento por lotes de estado, están actualizando el estado con diferentes claves.
el problema con su función de estado de actualización handleCriteriaChange . el criteria variable está vacío en la función useEffect y cuando lo usa o lo asigna. tiene que usar el valor de estado anterior mientras actualiza el estado.
import React from 'react'; import { useEffect, useState } from 'react'; export default function App() { const [criteria, setCriteria] = useState({}); const handleCriteriaChange = (values) => { setCriteria(prev=> ({ ...prev, ...values, })); }; useEffect(() => { setTimeout(() => { handleCriteriaChange({ courses: ['calculus', 'psychology'], }); }, 1000); setTimeout(() => { handleCriteriaChange({ type: 'manual', }); }, 5000); setTimeout(() => { handleCriteriaChange({ termLengths: [14, 7], }); }, 10000); // eslint-disable-next-line }, []); console.log({ criteria: JSON.stringify(criteria) }); return ( <div className="App"> <h1>Hello CodeSandbox {JSON.stringify(criteria)}</h1> <h2>Start editing to see some magic happen!</h2> </div> ); }