Tengo un botón de envío y al hacer clic quiero actualizar el estado a "NUEVO" y realizar la llamada de consulta con este estado "NUEVO". Sin embargo, en mi código actual, la consulta todavía usa el estado "ANTIGUO". ¿Hay alguna manera de hacer que la llamada de consulta use el estado "NUEVO" actualizado? Sin embargo, la consulta no falla, utiliza el estado "ANTIGUO"
import React,{useState} from "react"; import { gql, useMutation } from '@apollo/client'; import Button from "@material-ui/core/Button"; const UPDATE_DATA = gql` mutation updateData( $data: UpdateDataInput!){ updateData payload: $data) }` export default function StatusPage() { const [updateData] = useMutation(UPDATE_DATA); const [status,setStatus] = useState("OLD"); const handleSubmit = async () => { setStatus("NEW") try { const result = await updateData({ variables: { data: { status:status } } }); if(result.data) { console.log("SUCCESS") } } catch (e) { console.log("ERROR") } }; return ( <Button type ="submit" onClick={handleSubmit()}> Submit </Button> ); }Debido a que useState hook es asíncrono. Puede usar el gancho useEffect y agregar nuestro estado en la matriz de dependencia, y siempre obtendrá el valor actualizado. Muestra:
import { useState, useEffect } from "react"; export default function CountWithEffect() { const [count, setCount] = useState(0); const [doubleCount, setDoubleCount] = useState(count * 2); const handleCount = () => { setCount(count + 1); }; useEffect(() => { setDoubleCount(count * 2); // This will always use latest value of count }, [count]); return ( <div> <h2>Count with useEffect</h2> <h3>Count: {count}</h3> <h3>Count * 2: {doubleCount}</h3> <button onClick={handleCount}>Count++</button> </div> ); }