Estoy obteniendo datos de una API. La primera URL de recuperación que paso los datos devuelve el success y la otra URL de recuperación luego, usando la segunda URL de recuperación, busco los datos y los imprimo. No pude usar await ya que después de hacer una solicitud de búsqueda de la primera URL, toma tiempo para que la segunda URL de búsqueda obtenga los datos antes de solicitar los datos, así que estaba pensando en usar await. La entrada es CC(C)(C)Br . Aquí está el enlace del código
import React, { useState } from "react"; import TextField from "@mui/material/TextField"; import Button from "@mui/material/Button"; async function App() { const [solutestate, setSolutestate] = useState(""); const [fetchData, setFetchData] = useState(""); const [jsondata, setjsonData] = useState(""); console.log(solutestate); console.log(fetchData); let params = new URLSearchParams({ solute: solutestate }); const onSubmit = (e) => { e.preventDefault(); let [res1, res2] = await Promise.all([ fetch( `https://fastapi-ihub-n7b7u.ondigitalocean.app/predict_two?${params}`, { method: "GET" } ), fetch( `https://fastapi-ihub-n7b7u.ondigitalocean.app/predict_solubility_json`, { method: "GET" } ) ]); setFetchData(res1); setjsonData(res2); }; return ( <div className="App"> <> <form noValidate onSubmit={onSubmit}> <div> Input: CC(C)(C)Br <TextField label="Solute" variant="outlined" onChange={(e) => setSolutestate(e.target.value)} /> <Button type="submit" variant="contained"> Submit </Button> <TextField label="Result" variant="outlined" value={fetchData} /> {jsondata} </div> </form> </> </div> ); } export default App;La palabra clave await solo es válida en lugares donde se acepta el código asíncrono.
Lo más fácil aquí es hacer que la función onSubmit sea asíncrona.
const onSubmit = async (e) => { let [res1, res2] = await Promise.all([ fetch( `https://fastapi-ihub-n7b7u.ondigitalocean.app/predict_two?${params}`, { method: "GET" } ), fetch( `https://fastapi-ihub-n7b7u.ondigitalocean.app/predict_solubility_json`, { method: "GET" } ) ]); // etc }Los componentes de React no se pueden async de esta manera. Lo que probablemente desee es ejecutar una devolución de llamada asíncrona una vez que se haga clic en el botón.
const onSubmit = async (e) => { e.preventDefault(); let [res1, res2] = await Promise.all([ /* ... */ ]); setFetchData(res1); setjsonData(res2); } Si no desea que su función de controlador sea async , también puede simplemente llamar a una nueva función asíncrona:
const onSubmit = (e) => { e.preventDefault(); const fetchData = async () => { let [res1, res2] = await Promise.all([ /* ... */ ]); setFetchData(res1); setjsonData(res2); } fetchData(); }