Esencialmente tengo este objeto de estado y este método:
const [groupData, setGroupData] = useState({}); // groupData state groupData = { group1: [ { id: 1, name: Mike, age: 24 }, { id: 2, name: Bob, age: 31 } ], group2: [ { id: 3, name: Christin, age: 21 }, { id: 4, name: Michelle, age: 33 } ], } const stateRef = useRef(); stateRef.current = groupData; const handleRemovePerson = (personToRemoveById: string) => { const filteredGroupData = Object.fromEntries( Object.entries(groupData).map(([key, value]) => { return [key, value.filter((person) => person.id !== personToRemoveById)]; }), ); setMainContentData(filteredGroupData); // Now check if group array does not have anymore persons, if empty then delete group array console.log('stateRef', stateRef); // outputs the correct current data const filteredStateRef = Object.keys(stateRef).map((key) => stateRef[key]); console.log('filteredStateRef', filteredStateRef); // outputs previous data ?? };Probé useRef y una vez que lo repasé, me devolvió los datos anteriores. ¿Cómo puedo obtener los datos más actuales después de configurar el estado y luego operar con esos nuevos datos de inmediato? ¡Gracias!
En primer lugar, no puede acceder al state después de usar setState porque es una operación asíncrona y si desea verificar algo después de usar setState , necesita usar useEffect hook para escuchar el cambio de state y decidir qué hacer con él, o en reciente versiones de react y react-dom podría usar una función no tan sugerida llamada flushSync que actualizará el estado de forma síncrona.
entonces la forma preferida es usar useEffect así:
const handleRemovePerson = (personToRemoveById: string) => { const filteredGroupData = Object.fromEntries( Object.entries(groupData).map(([key, value]) => { return [key, value.filter((person) => person.id !== personToRemoveById)]; }), ); setMainContentData(filteredGroupData); }; useEffect(() => { if(true/**some conditions to prevents extra stuff */){ // do your things, for example: console.log('stateRef', stateRef); // outputs the correct current data const filteredStateRef = Object.keys(stateRef).map((key) => stateRef[key]); } }, [mainContentData, /**or other dependencies based on your needs */])