我如何从 Axios 获取数据并 return 从 React 中的函数组件获取数据？

Question

我正在尝试从 URL 获取 ID，因此我可以从 API 获取特定的 post，以便 return 它。我不能使用 Class 组件来这样做，因为 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

Answer 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

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

我如何从 Axios 获取数据并 return 从 React 中的函数组件获取数据？

How do I get data from Axios and return it from a Function Component in React?

javascript

parameters

components

routes

reactjs