React - 多个 Axios 请求

Question

我是 React 新手，我无法找到任何解决我的问题的方法。我正在成功加载第一个获取请求，然后我使用 lodash 从数组中获取一个随机元素，并使用该信息创建一个新 URL，但我无法使用与第一个 API 调用完全相同的方法创建一个数组.请有人可以帮助我如何创建新的 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>
  );
}

Answer 1

注意事项：

1- 始终在顶部使用 React 钩子。

2- 如果第二个依赖于第一个，那么它应该在第一个请求的then 内，因为 Axios 正在异步发送请求。

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

输出：

Answer 2

您甚至在初始化之前就使用了 selectedRegion 值，因为 useEffect [] 中的空输入意味着 react 将在组件安装后立即调用它。您需要在第一个解决或组件更新后发出第二个获取请求（生命周期方法） 这样可以更清楚一点
componentDidMount equivalent on a React function/Hooks component?

Answer 3

您需要使用 selectedRegion 作为 useEffect 挂钩的依赖项。 所以每次更改 selectedRegion 时都会调用钩子。

例子，

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"));

Answer 4

这是 React 的方法

const App = () => {
  const [list, setList] = React.useState({});
  const [speciesList, setSpeciesList] = React.useState({});
  const [error, setError] = React.useState(0);
  const baseURL = "http://apiv3.iucnredlist.org/api/v3/region/list?token=9bb4facb6d23f48efbf424bb05c0c1ef1cf6f468393bc745d42179ac4aca5fee";

  // get List of available regions
  React.useEffect(() => {
    function fetchdata() {
      axios
        .get(baseURL)
        .then(response => {
          const list = response.data
          setList(list); // got first list
          console.log(list)

          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)

          axios
            .get(selectedRegion)
            .then((response) => {
              const selectedRegionList = response.data
              setSpeciesList(selectedRegionList) // here'e data for the region
              console.log("data count:", selectedRegionList.count)
            }).catch(error => {
              setError(error);
            })

        })
        .catch(error => setError(error))
    }

    fetchdata()
  }, []);

  return <div / > ;
}

ReactDOM.render( < App / > , document.getElementById('root'))

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<div id="root"></div>