时间戳

首页 > 解决方案 > React - 多个 Axios 请求

javascript - React - 多个 Axios 请求

问题描述

我是 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>
  );
}

标签： javascriptreactjsaxiosreact-hooks

解决方案

you need to use selectedRegion as a dependency for useEffect hook. so the hook will be called every time you change the selectedRegion.

example,

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

推荐阅读