reactjs - 在 React 函数中使用 Axios

Question

我正在尝试从 Axios Get 中提取数据。后端正在使用另一个页面，它是一个 React 组件。

然而，在一个函数中，它不起作用。数组的长度不是预期的三，内容为空。

我确保等待 axios 调用完成，但我不确定发生了什么。

import React, { useState, useEffect } from "react";

import { Container } from "@material-ui/core";
import ParticlesBg from "particles-bg";
import "../utils/collagestyles.css";
import { ReactPhotoCollage } from "react-photo-collage";
import NavMenu from "./Menu";
import { useRecoilValue } from "recoil";
import { activeDogAtom } from "./atoms";
import axios from "axios";

var setting = {
  width: "300px",
  height: ["250px", "170px"],
  layout: [1, 3],
  photos: [],
  showNumOfRemainingPhotos: true,
};

const Collages = () => {
  var doggies = [];
  //const [dogs, setData] = useState({ dogs: [] });

  const dog = useRecoilValue(activeDogAtom);

  const getPets = async () => {
    try {
      const response = await axios.get("/getpets");
        doggies = response.data;
        //setData(response.data);
    } catch (err) {
      // Handle Error Here
      console.error(err);
    }
  };

  useEffect(() => {
    const fetchData = async () => {
      getPets();
    };
    fetchData();
  }, []);

  return (
    <>
      <NavMenu />
      <ParticlesBg type="circle" margin="20px" bg={true} />
      <br></br>
      <div>
        {doggies.length === 0 ? (
          <div>Loading...</div>
        ) : (
          doggies.map((e, i) => {
            return <div key={i}>{e.name}</div>;
          })
        )}
      </div>
      <Container align="center">
        <p> The length of dogs is {doggies.length} </p>

        <h1>Knight's Kennel</h1>

        <h2> The value of dog is {dog}</h2>
        <h2>
         Breeders of high quality AKC Miniature Schnauzers in Rhode Island
        </h2>
        <section>
          <ReactPhotoCollage {...setting} />
        </section>
      </Container>
    </>
  );
};
export default Collages;

标签： reactjsaxios

Answer 1

据我所知，不要从 getPets() 函数返回任何内容。

使用 useState 函数来保存你的 doggies 条目：

let [doggies, setDoggies ] = useState([]);

  const getPets = async () => {
    try {
      const response = await axios.get("/getpets");
        return response.data;
    } catch (err) {
      // Handle Error Here
      console.error(err);
    }
    return []
  };

  useEffect(() => {
    setDoggies(await getPets());
  });