Блог

У меня есть кнопка «Отправить», и по щелчку я хочу обновить статус до «НОВЫЙ» и выполнить запрос с этим «НОВЫМ» статусом. Однако в моем текущем коде запрос все еще использует статус «СТАРЫЙ». Есть ли способ сделать запрос, чтобы использовать обновленное состояние «НОВЫЙ»? Однако запрос не завершается ошибкой, он использует «СТАРОЕ» состояние

 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 () =gt; {  setStatus("NEW")  try {  const result = await updateData({  variables: {  data: {  status:status  }  }  });  if(result.data) {  console.log("SUCCESS")  }  } catch (e) {  console.log("ERROR")  }  };  return (  lt;Button type ="submit" onClick={handleSubmit()}gt; Submit lt;/Buttongt;  ); } 

Из useState -за того, что крюк асинхронен. Вы можете использовать крючок useEffect и добавить наше состояние в массив зависимостей, и вы всегда будете получать обновленное значение. Образец:

 import { useState, useEffect } from "react";  export default function CountWithEffect() {  const [count, setCount] = useState(0);  const [doubleCount, setDoubleCount] = useState(count * 2);  const handleCount = () =gt; {  setCount(count   1);  };   useEffect(() =gt; {  setDoubleCount(count * 2); // This will always use latest value of count  }, [count]);   return (  lt;divgt;  lt;h2gt;Count with useEffectlt;/h2gt;  lt;h3gt;Count: {count}lt;/h3gt;  lt;h3gt;Count * 2: {doubleCount}lt;/h3gt;  lt;button onClick={handleCount}gt;Count  lt;/buttongt;  lt;/divgt;  ); }