前兩篇的文章有介紹到 useEffect 和 JSON Server（假後端），並說明 db.json 的內容應該如何撰寫

這篇文章主要會示範如何將這兩個方法結合，在 React 抓取並顯示資料

利用 useEffect 來抓取 db.json 資料

步驟一 在終端機裡執行：

npx json-server --watch data/db.json --port 8000

確保伺服器正在運行，否則 React 無法獲取資料

步驟二：在 React 裡用 useEffect 抓資料

範例：

Home.js

import { useEffect, useState } from "react";
import BlogList from "./BlogList";

const Home = () => {
  const [blogs, setBlogs] = useState(null)

  useEffect(() => {
    fetch('http://localhost:8000/blogs')
      .then(res => {
        return res.json();
      })
      .then(data => {
        setBlogs(data);
      })
  }, [])

  return (
    <div className="home">
      {blogs && <BlogList blogs={blogs} />}
    </div>
  );
}
 
export default Home;

第一部分主要程式碼：

useEffect(() => {
  fetch('http://localhost:8000/blogs')
    .then(res => {
      return res.json();
    })
    .then(data => {
      setBlogs(data);
    })
}, [])

程式碼解釋：

1. 元件第一次渲染 → useEffect 執行
2. fetch → 向 JSON Server (http://localhost:8000/blogs)發送 GET 請求
3. JSON Server → 回傳 db.json 裡的資料
4. res.json() → 把 Response 物件轉換成 JavaScript 格式
5. setBlogs(data) → 把資料存進 React state
6. React 重新渲染 → 更新畫面，資料顯示在畫面上

關鍵細節補充

.then(res => res.json())

• fetch 回傳的第一層是 Response 物件，必須用 res.json() 轉成JavaScript物件 / 陣列

.then(data => setBlogs(data))

• data 就是 JSON Server 回傳的資料
• setBlogs(data) 會更新 React 的 state → 把抓到的資料放進 blogs 這個 state 裡

useEffect(() => {
(…)
},[])

• useEffect 的第二個參數是 []，代表這段程式碼只會在元件第一次載入時執行一次

第二部分主要程式碼：渲染資料

  return (
      {blogs && <BlogList blogs={blogs} />}
    </div>
  );
} 

註：原本 blogs && <BlogList blogs={blogs} />，是被視為純文字 / HTML，因此需要加上 {} 來表示要寫JavaScript 的條件判斷

{blogs && <BlogList blogs={blogs} />} 意思：

1. 一開始 blogs 的值是 null
   → 因為 useState(null)。此時 blogs && 等於 null，所以不會渲染畫面
2. 當 fetch 拿到資料後
   → 呼叫 setBlogs(data)，此時 blogs 不再是 null，而是一個陣列（或物件）
   → 條件 blogs && ... 成立，React 就會渲染 <BlogList blogs={blogs} />

當整個流程完成了以後，前端就可以抓取到後端的資料，並顯示在畫面上，就不需要從在元件的程式碼寫上這些資料