无法使用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));
}, []);

Answer 2

我认为问题出在 useParam 上。我通过使用 redux 而不是将其作为参数传递来解决我的问题。请谁能解释一下为什么反应会这样？