无法使用 useParams 显示 JSON 数据

Question

我已经将一些图书数据存储在 JSON 文件中，并且希望在有人单击特定图书封面时动态显示书评（json 文件中的“博客”）。但是数据没有显示在 UI 上，控制台给了我Uncaught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

有人可以指导我在这里做错什么吗？

blogs.json 文件：

[
  {
    "id": 1,
    "name": "The 48 Laws Of Power",
    "blog": "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur",
    "img": "https://i.ibb.co/RpP2LGp/48-Laws-Of-Power.jpg"
  },
  {
    "id": 2,
    "name": "Rich Dad Poor Dad",
    "blog": "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantit, sed quia consequuntur magni dolores eos qui ratione voluptatem seel illum qui dolorem eum fugiat quo voluptas nulla pariatur",
    "img": "https://i.ibb.co/8Brh2Nc/rich-Dad-Poor-Dad.jpg"
  },
  {
    "id": 3,
    "name": "Show Your Work",
    "blog": "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur",
    "img": "https://i.ibb.co/VjLBT1T/show-Your-Work.jpg"
  },
  {
    "id": 4,
    "name": "Atomic Habits",
    "blog": "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto tiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur",
    "img": "https://i.ibb.co/ss0kLQw/atomic-Habits.jpg"
  },
  {
    "id": 5,
    "name": "The Almanack Of Naval Ravikant",
    "blog": "Sed ut perspiciatis unde omnis iste natus error sur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur",
    "img": "https://i.ibb.co/87SmcFz/alamanack-naval.jpg"
  },
  {
    "id": 6,
    "name": "The 4-Hour Work Week",
    "blog": "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa qrelit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur",
    "img": "https://i.ibb.co/Pxtt4dH/4-hour-work-week.jpg"
  }
]

Books.js 文件：

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

const Books = () => {
  const [books, setBooks] = useState([]);

  useEffect(() => {
    fetch("blogs.json")
      .then((res) => res.json())
      .then((data) => setBooks(data));
  }, []);

  return (
    <div id="bookshelf">
      <div className="font-bold text-3xl mt-24 mb-8">
        <h3>My Bookshelf</h3>
      </div>

      <div className="grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 ">
        {books.map((book) => (
          <Book key={book.id} book={book}></Book>
        ))}
      </div>
    </div>
  );
};

export default Books;

Book.js 文件：

import React from "react";
import { useNavigate } from "react-router-dom";
import "./Book.css";

const Book = ({ book }) => {
  const navigate = useNavigate();

  const navigateToBookReview = (id) => {
    navigate(`/book/${id}`);
  };

  const { id, name, img, description } = book;
  return (
    <div className="card book-container card-compact w-56 bg-base-100 shadow-2xl">
      <figure onClick={() => navigateToBookReview(id)}>
        <img className="h-full w-full" src={img} alt="Books" />
      </figure>
    </div>
  );
};

export default Book;

BookDetails.js 文件：

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

const BookDetails = () => {
  const { id } = useParams();
  const [blog, setBlog] = useState({});

  useEffect(() => {
    const url = `http://localhost:3000/book/${id}`;
    fetch(url)
      .then((res) => res.json())
      .then((data) => setBlog(data));
  }, []);

  return (
    <div>
      <h2>This is book details: {id} </h2>
      <h2>{blog.name}</h2>
    </div>
  );
};

export default BookDetails;

App.js 文件：

import "./App.css";
import Navbar from "./Pages/Home/Shared/Navbar";
import { Routes, Route, Link } from "react-router-dom";
import { useState } from "react";
import Home from "./Pages/Home/Home";
import NotFound404 from "./Pages/Home/Shared/NotFound404";
import BookDetails from "./Pages/Home/Books/BookDetails";

function App() {
  return (
    <div>
      <Navbar></Navbar>
      <Routes>
        <Route path="/" element={<Home></Home>} />
        <Route path="/book/:id" element={<BookDetails></BookDetails>} />
        <Route path="*" element={<NotFound404></NotFound404>}></Route>
      </Routes>
    </div>
  );
}

export default App;

Answer 1

如果blogs.json 文件位于根"/" 公共目录中，则Books 组件在获取时应为其使用绝对文件路径，否则应用程序在请求资源时将使用当前URL。资源应该是"/blogs.json"。

例子：

useEffect(() => {
  fetch("/blogs.json")
    .then((res) => res.json())
    .then((data) => setBooks(data));
}, []);