Estoy tratando de usar reaccionar para obtener información de API (ver más abajo) pero no devuelve ningún valor pero funciona cuando uso un enlace diferente. No estoy seguro de cuál es el problema con el segundo enlace. ¿Cómo hago que funcione el segundo enlace o hay un método diferente?
import React, { useState, useEffect } from "react"; import axios from "axios"; export default function App() { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { getData() }, []); async function getData() { // await axios("https://randomuser.me/api") // <----- this works await axios("https://api.sampleapis.com/wines/reds") // <----- this does not work .then((response) => { setData(response.data); console.error("No Error fetching data: fds"); }) .catch((error) => { console.error("Error fetching data: ", error); setError(error); }) .finally(() => { setLoading(false); }); } if (loading) return "Loading..."; if (error) return "Error!"; //dfdsaf return ( <> {/* <img src={data.results[0].picture.medium} alt="random user" /> */} <pre>{JSON.stringify(data, null, 2)}</pre> </> ); }Las estructuras de los datos de retorno de cada API son diferentes entre sí.
https://randomuser.me/api -> returns {"results":[{"gender"... https://api.sampleapis.com/wines/reds -> returns [{"winery":"Maselva","wine"...Entonces, obviamente, solo cambiar la URL no funcionará. Debe cambiar el código de acuerdo con la estructura de los datos devueltos para acceder a ellos correctamente.
La estructura de respuesta es diferente y es posible que no necesite usar .then y .catch ya que ya usó Async/Await .
Aquí hay un ejemplo de trabajo en codesandbox
<script type="text/babel"> // import React, { useState, useEffect } from "react"; // import axios from "axios"; const { useState, useEffect } = React; function App() { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [randomUserData, setRandomUserData] = useState(null); const [randomUserLoading, setRandomUserLoading] = useState(true); const [randomUserError, setRandomUserError] = useState(null); useEffect(() => { getRandomUserData(); getSampleApiData(); }, []); async function getSampleApiData() { try { const response = await axios("https://api.sampleapis.com/wines/reds"); setData(response.data); console.error("No Error fetching data: fds"); } catch (error) { console.error("Error fetching data: ", error); setError(error); } setLoading(false); } async function getRandomUserData() { try { const response = await axios("https://randomuser.me/api"); setRandomUserData(response.data); console.error("No Error fetching data: fds"); } catch (error) { console.error("Error fetching data: ", error); setRandomUserError(error); } setRandomUserLoading(false); } if (loading || randomUserLoading) return "Loading..."; if (error || randomUserError) return "Error!"; return ( <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", width: "100%" }} > <div> <pre>{JSON.stringify(data, null, 2)}</pre> </div> <div> <pre>{JSON.stringify(randomUserData, null, 2)}</pre> </div> </div> ); } // export default App; ReactDOM.render(<App />, document.querySelector("#app")); </script> <div id="app"></div> <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <script crossorigin src="https://unpkg.com/axios@0/dist/axios.js"></script> <script crossorigin src="https://unpkg.com/@babel/standalone@7/babel.js"></script>