Estoy tratando de crear una función de publicación de API que se envíe cuando el tiempo de espera alcance los 45 segundos y cuando el usuario haga clic en el botón Cancelar, la solicitud de publicación se detendrá o borrará el tiempo de espera para detenerla. Hice algo que funciona pero después de otros 45 segundos hace otro requisito de publicación. ¿Hay alguna forma de realizar la solicitud de publicación después de los 45 segundos y luego cancelar la solicitud cuando el usuario hace clic en el botón cancelar?
import { makeStyles } from "@material-ui/core/styles"; import styles from "styles/jss/nextjs-material-kit/pages/components.js"; import Button from "components/CustomButtons/Button.js"; import Time from "components/Time.js" import { withRouter } from 'next/router' const useStyles = makeStyles(styles); function processorder({ query: { name, number, location, ordermessage, price, } }) { const classes = useStyles(); const [processed, setProcessed] = useState(false) const [canceled, setCanceled] = useState(false) const [time, setTime] = useState() const [data, setData] = useState({}) const Id = setTimeout(() => { const requestOptions = { method: 'POST', mode: 'cors', headers: { 'Content-Type': 'application/json', 'Api-key': 'ml7h7L8nN8Q2yA', "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Headers": "X-Requested-With" }, body: JSON.stringify({ client: name, client_phone: number, restaurant: "Chitis", location: location, ordermessage: "Jollof Rice", amount: "500" }) }; fetch('https://munche-bot.herokuapp.com/api/v1/orders', requestOptions) .then(response => response.json()) .then(result => { console.log(result) setData(result.data) setProcessed(true); return () => clearTimeout(Id) }) .catch(error => console.log('error', error)); }, 45000); const cancel = () => { clearTimeout(Id); setCanceled(true); if (canceled == true) { alert("canceled") } }; return ( <div> <h3> processing Order<h3> (processed == false ? (<h3>proceed to payment in <Time/> <h3>) : (<h3>processed proceeding to payment</h3>) (canceled == false ? (<Button onClicK={cancel} />) : <h3>order canceled</h3> </div> ) } processorder.getInitialProps = ({ query }) => { return { query } }; export default processorderPodría envolver toda su función de tiempo de espera en un si, que depende del estado. Sin embargo, esto no es muy sólido ya que cambiar los datos o la hora también envía una solicitud duplicada:
import { makeStyles } from "@material-ui/core/styles"; import styles from "styles/jss/nextjs-material-kit/pages/components.js"; import Button from "components/CustomButtons/Button.js"; import Time from "components/Time.js" import { withRouter } from 'next/router' const useStyles = makeStyles(styles); function processorder({ query: { name, number, location, ordermessage, price, } }) { const classes = useStyles(); const [processed, setProcessed] = useState(false) const [canceled, setCanceled] = useState(false) const [time, setTime] = useState() const [data, setData] = useState({}) if (!canceled && !processed) { const Id = setTimeout(() => { const requestOptions = { method: 'POST', mode: 'cors', headers: { 'Content-Type': 'application/json', 'Api-key': 'ml7h7L8nN8Q2yA', "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Headers": "X-Requested-With" }, body: JSON.stringify({ client: name, client_phone: number, restaurant: "Chitis", location: location, ordermessage: "Jollof Rice", amount: "500" }) }; fetch('https://munche-bot.herokuapp.com/api/v1/orders', requestOptions) .then(response => response.json()) .then(result => { console.log(result) setData(result.data) setProcessed(true); return () => clearTimeout(Id) }) .catch(error => console.log('error', error)); }, 45000); } const cancel = () => { clearTimeout(Id); setCanceled(true); if (canceled == true) { alert("canceled") } }; return ( <div> <h3> processing Order<h3> (processed == false ? (<h3>proceed to payment in <Time/> <h3>) : (<h3>processed proceeding to payment</h3>) (canceled == false ? (<Button onClicK={cancel} />) : <h3>order canceled</h3> </div> ) } processorder.getInitialProps = ({ query }) => { return { query } }; export default processorder Probablemente sería mejor para usted hacer toda la búsqueda y el tiempo de espera dentro de un controlador de clics, con la verificación de tiempo de espera que canceled es falso antes de enviar la solicitud.
import { makeStyles } from "@material-ui/core/styles"; import styles from "styles/jss/nextjs-material-kit/pages/components.js"; import Button from "components/CustomButtons/Button.js"; import Time from "components/Time.js" import { withRouter } from 'next/router' const useStyles = makeStyles(styles); function processorder({ query: { name, number, location, ordermessage, price, } }) { const classes = useStyles(); const [processed, setProcessed] = useState(false) const [canceled, setCanceled] = useState(false) const [time, setTime] = useState() const [data, setData] = useState({}) const [id, setId] = useState() const cancel = () => { clearTimeout(id); setCanceled(true); if (canceled == true) { alert("canceled") } }; useEffect(() => { const Id = setTimeout(() => { const requestOptions = { method: 'POST', mode: 'cors', headers: { 'Content-Type': 'application/json', 'Api-key': 'ml7h7L8nN8Q2yA', "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Headers": "X-Requested-With" }, body: JSON.stringify({ client: name, client_phone: number, restaurant: "Chitis", location: location, ordermessage: "Jollof Rice", amount: "500" }) }; fetch('https://munche-bot.herokuapp.com/api/v1/orders', requestOptions) .then(response => response.json()) .then(result => { console.log(result) setData(result.data) setProcessed(true); clearTimeout(Id); }) .catch(error => console.log('error', error)); }, 45000); setId(Id); console.log(data) }, []); return ( <div> <h3> processing Order<h3> (processed == false ? (<h3>proceed to payment in <Time/> <h3>) : (<h3>processed proceeding to payment</h3>) (canceled == false ? (<Button onClicK={cancel} />) : <h3>order canceled</h3> </div> ) } processorder.getInitialProps = ({ query }) => { return { query } }; export default processorder