如何從 Axios 獲取數據並從 React 中的 Function 組件返回？

Question

我正在嘗試從 URL 獲取 id，因此我可以從 API 獲取特定帖子，以便返回它。 我不能使用 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鈎子中的請求只會在第一次渲染時發生，但不會在之后發生。

收到響應后，將結果保存在 state 中。 根據 state 的值呈現正確的數據。

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;