Je suis nouveau sur React et je n'ai pas trouvé de solution à mon problème. Je charge avec succès la première demande d'obtention, puis je prends un élément aléatoire du tableau avec lodash et avec cette information, je peux créer une nouvelle URL mais je ne parviens pas à créer un tableau avec exactement la même méthode que j'ai utilisée pour le premier appel API . S'il vous plaît, quelqu'un pourrait m'aider comment puis-je créer une nouvelle demande 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>
  );
}
0
Ritmillio X 2 oct. 2021 à 15:56

3 réponses

Meilleure réponse

Remarques:

1- Utilisez toujours les crochets React en haut.

2- Si le second dépend du premier, alors il devrait être à l'intérieur de then de la première requête car Axios envoie la requête de manière asynchrone.

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>;
}

Sortie :

enter image description here

0
Abdulmuhaymin 2 oct. 2021 à 13:40

Vous utilisez la valeur selectedRegion avant même qu'elle ne soit initialisée car une entrée vide dans useEffect [] signifie que react l'appellera immédiatement après le montage du composant. Vous devez effectuer la deuxième demande d'obtention après la résolution de la première ou la mise à jour du composant (méthodes de cycle de vie) Cela peut donner un peu plus de clarté
componentDidMount équivalent sur une fonction React/composant Hooks ?

0
tanmya 2 oct. 2021 à 13:22

Vous devez utiliser selectedRegion comme dépendance pour le crochet useEffect. donc le hook sera appelé à chaque fois que vous changerez le selectedRegion.

Exemple,

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"));
0
NITHIN PB 2 oct. 2021 à 13:28