Me disculpo por hacer esta pregunta. He leído muchas publicaciones sobre cómo volver a representar el estado, pero todavía no puedo resolverlo. Soy demasiado novato :( Puedo hacer que las cosas funcionen con useRef, pero me gustaría aprender a actualizar el estado con useEffect y useCallback. Mi búsqueda de base de datos requiere un segundo clic para activarse porque setState es asíncrono. Ninguno de mis useEffect /useCallback actualiza el estado :( useEffect se activa, obtengo el registro de la consola.
export function Form() { const[inputKey, setInputKey] = useState(""); const inputKeyRef = useRef(); const [keyValid, setKeyValid] = useState(false); useEffect(() => { console.log("keyValid:", keyValid) }, [keyValid]) const [keyAuthentic, setKeyAuthentic] = useState(false); useEffect(() => { console.log("keyAuthentic:", keyAuthentic) }, [keyAuthentic]) const updateKeyValid = useCallback( () => setKeyValid(true), [keyValid, setKeyValid] ) const submit = e => { e.preventDefault(); if ( !inputKeyRef.current.value.length < 12 || !inputKeyRef.current.value.length < 20 ) { setKeyValid(true) // not updating state updateKeyValid(); // not updating state } if ( keyValid === true ) { // state not true if keyValid(true) db.collection("users").doc(inputKey).get().then((doc) => { if (doc.exists) { setKeyAuthentic(true) console.log(doc.data()) } }); } }; return ( <div className="form__submit"> <Button type="submit" onClick={submit}}>Submit</Button> </div> ) } export default FormComo notó, setKeyValid es asíncrono, por lo que no tendrá acceso al nuevo valor hasta el próximo procesamiento.
Sus efectos no llaman a ninguna función setState, por lo que no estoy seguro de por qué esperaría que el estado se actualice dentro de ellos.
Además, el estado no debe ser determinista. Si puede determinar cuál debe ser un valor en cualquier representación en función de algún otro estado, entonces no necesita useState en absoluto. Me gusta:
export function Form() { const [keyAuthentic, setKeyAuthentic] = useState(false); const [inputKey, setInputKey] = useState(""); const submit = e => { e.preventDefault(); const valid = !inputKey.length < 12 || !inputKey.length < 20; if (!valid) return; db.collection("users").doc(inputKey).get().then((doc) => { if (doc.exists) { setKeyAuthentic(true) console.log(doc.data()) } }); }; return ( <div className="form__submit"> <Button type="submit" onClick={submit}}>Submit</Button> </div> ) }