如何从 Axios 获取数据并从 React 中的函数组件返回？答案

【问题标题】：How do I get data from Axios and return it from a Function Component in React?如何从 Axios 获取数据并从 React 中的函数组件返回？
【发布时间】：2022-01-10 18:29:16
【问题描述】：

我正在尝试从 URL 获取 id，因此我可以从 API 获取特定帖子，以便返回它。我不能使用 Class Component 这样做，因为 useParams 仅适用于函数。我尝试将数据放入变量 post 中，但它也不起作用。

import { useParams } from "react-router-dom";
import axios from "axios";

const Post = () => {
    let params = useParams();
    let post = null;
    axios.get('https://jsonplaceholder.typicode.com/posts/' + params.post_id)
    .then(res => {
        post = res.data ? (
            <div>
                <h4>{res.data.title}</h4>
                <p>{res.data.body}</p>
            </div>
        ) : (
            <div>Loading post...</div>
        );
    });
    
    return (
        <div>{post}</div>
    )
}

export default Post

【问题讨论】：

标签： javascript reactjs parameters routes components

【解决方案1】：

动态数据，例如带有axios 的请求应该在useEffect 挂钩中完成。依赖项数组为空 [] 它规定 useEffect 钩子中的请求只会在第一次渲染时发生，但不会在之后发生。

当响应进来时，将结果保存在一个状态中。根据状态的值呈现适当的数据。

import { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import axios from "axios";

const Post = () => {
  let params = useParams();
  const [post, setPost] = useState(null)

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts/' + params.post_id)
      .then(post => {
        setPost(post)
      });
  }, [])
  
  return (
    <div>
      {post !== null ? (
        <div>
          <h4>{res.data.title}</h4>
          <p>{res.data.body}</p>
        </div>
      ) : (
        <div>Loading post...</div>
      )}
    </div>
  )
}

export default Post

【讨论】：

【解决方案2】：

你应该以这种方式使用useEffect和useState钩子

import { useEffect, useState } from "react";
import axios from "axios";
import { useParams } from "react-router-dom";
import "./App.css";

function App() {
  let params = useParams();
  const [postState, setPostState] = useState({ data: {}, loading: false });

  useEffect(() => {
    axios.get("https://jsonplaceholder.typicode.com/posts/"+ params.post_id).then((res) => {
      if (res.data) {
        setPostState((s) => ({ ...s, data: res.data }));
      } else {
        setPostState((s) => ({ ...s, loading: true }));
      }
    });
  }, []);

  const { data, loading } = postState;
  return (
    <>
      {data && !loading ? (
        <div>
          <h4>{data.title}</h4>
          <p>{data.body}</p>
        </div>
      ) : (
        <div>Loading post...</div>
      )}
    </>
  );
}

export default App;

【讨论】：