0
305
VistasReaccionar: solicitud múltiple de Axios
Soy nuevo en React y no pude encontrar ninguna solución para mi problema. Estoy cargando la primera solicitud de obtención con éxito, luego tomo un elemento aleatorio de la matriz con lodash y con esa información puedo crear una nueva URL, pero no puedo crear una matriz con exactamente el mismo método que usé para la primera llamada a la API. . Por favor, alguien podría ayudarme. ¿Cómo puedo crear una nueva solicitud axios.get?
import axios from "axios"; import React from "react"; import _ from 'lodash'; export default function App() { const baseURL = "http://apiv3.iucnredlist.org/api/v3/region/list?token=9bb4facb6d23f48efbf424bb05c0c1ef1cf6f468393bc745d42179ac4aca5fee"; const [list, setList] = React.useState(0); const [error, setError] = React.useState(0); //get List of available regions React.useEffect(() => { axios.get(baseURL).then((response) => { setList(response.data); }).catch(error => { setError(error); }) }, []); if (error) return `Error: ${error.message}`; if (!list) return null; //Take a random region from the list const randomRegion = _.sample(list.results); console.log(randomRegion) //Load the list of all species in the selected region const selectedRegion = "http://apiv3.iucnredlist.org/api/v3/species/region/"+ randomRegion.identifier + "/page/0?token=9bb4facb6d23f48efbf424bb05c0c1ef1cf6f468393bc745d42179ac4aca5fee" console.log(selectedRegion) const [speciesList, selectedRegionList] = React.useState(0); React.useEffect(() => { axios.get(selectedRegion).then((response) => { selectedRegionList(response.data); }).catch(error => { setError(error); }) }, []); return ( <div> </div> ); }3 Respuestas
Responde la pregunta0
Está utilizando el valor de región selectedRegion incluso antes de que se inicialice porque una entrada vacía en useEffect [] significa que reaccionar lo llamará inmediatamente después de que se haya montado el componente. Debe realizar la segunda solicitud de obtención después de que se haya resuelto la primera o se haya actualizado el componente (métodos de ciclo de vida). Esto puede brindar un poco más de claridad.
¿ComponentDidMount equivalente en una función React/componente Hooks?
0
Notas:
1- Usa siempre ganchos React en la parte superior.
2- Si el segundo depende del primero, then debería estar dentro de la primera solicitud porque Axios está enviando la solicitud de forma asíncrona.
import axios from "axios"; import React from "react"; import _ from "lodash"; export default function App() { const baseURL = "http://apiv3.iucnredlist.org/api/v3/region/list?token=9bb4facb6d23f48efbf424bb05c0c1ef1cf6f468393bc745d42179ac4aca5fee"; const [list, setList] = React.useState(0); const [error, setError] = React.useState(0); const [speciesList, selectedRegionList] = React.useState(0); //get List of available regions React.useEffect(() => { axios .get(baseURL) .then((response) => { setList(response.data); //Take a random region from the list const randomRegion = _.sample(response.data["results"]); //Load the list of all species in the selected region const selectedRegion = "http://apiv3.iucnredlist.org/api/v3/species/region/" + randomRegion.identifier + "/page/0?token=9bb4facb6d23f48efbf424bb05c0c1ef1cf6f468393bc745d42179ac4aca5fee"; getOneRegion(selectedRegion); }) .catch((error) => { setError(error); }); }, []); function getOneRegion(url) { axios .get(url) .then((response) => { selectedRegionList(response.data); console.log(response.data); }) .catch((error) => { setError(error); }); } if (error) return `Error: ${error["message"]}`; if (!list) return null; if (speciesList) return ( <> <h1>{speciesList["region_identifier"]}</h1> <h2>Count: {speciesList["count"]}</h2> </> ); return <div></div>; }Producción:
0
necesita usar la región selectedRegion como una dependencia para el gancho useEffect. por lo que se llamará al enlace cada vez que cambie la selectedRegion .
ejemplo,
import React, { useEffect, useState } from "react"; import ReactDOM from "react-dom"; const regions = ["region1", "region2", "region3"]; export default function App() { const [selectedRegion, setSelectedRegion] = useState(0); useEffect(() => { // api call console.log(regions(regions[selectedRegion])); }, [selectedRegion]); return ( <div> <button onClick={() => setSelectedRegion((current) => current + 1)}> change region </button> </div> ); } ReactDOM.render(<App />, document.getElementById("container"));