json-server 返回 html 而不是 JSON

Question

我在 localhost:3001 上创建了一个 json-server，但是当我获取该数据时，它返回给我的是 HTML 而不是 JSON。

这是我的 JSON 数据

{
  "articles": [
    {
      "id": "1",
      "title": "title1",
      "author": "Ben",
      "body": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, ullam eos dignissimos aperiam rerum qui suscipit cum nobis, totam ea tenetur perferendis praesentium corporis possimus ducimus et minima voluptatum. Numquam mollitia culpa consectetur unde illum est aut dicta eligendi vero molestias impedit sint, maiores saepe voluptas necessitatibus excepturi ducimus repudiandae, non quidem nobis veritatis! Libero neque, cumque illo est corrupti eaque recusandae ipsum, ut debitis vitae molestias deleniti voluptates distinctio sapiente autem. Tempore aperiam minima sit atque, tempora doloribus blanditiis id ipsum. Distinctio quos nisi, totam sunt ex voluptatum? Neque alias laborum ipsum doloremque fuga earum in autem. Hic alias omnis facilis facere eum assumenda deleniti ad, maiores laudantium temporibus odio non, molestiae dolorum! Quo mollitia ex sapiente maiores excepturi?"
    },
    {
      "id": "2",
      "title": "title2",
      "author": "Joseph",
      "body": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, ullam eos dignissimos aperiam rerum qui suscipit cum nobis, totam ea tenetur perferendis praesentium corporis possimus ducimus et minima voluptatum. Numquam mollitia culpa consectetur unde illum est aut dicta eligendi vero molestias impedit sint, maiores saepe voluptas necessitatibus excepturi ducimus repudiandae, non quidem nobis veritatis! Libero neque, cumque illo est corrupti eaque recusandae ipsum, ut debitis vitae molestias deleniti voluptates distinctio sapiente autem. Tempore aperiam minima sit atque, tempora doloribus blanditiis id ipsum. Distinctio quos nisi, totam sunt ex voluptatum? Neque alias laborum ipsum doloremque fuga earum in autem. Hic alias omnis facilis facere eum assumenda deleniti ad, maiores laudantium temporibus odio non, molestiae dolorum! Quo mollitia ex sapiente maiores excepturi?"
    },
    {
      "id": "3",
      "title": "title3",
      "author": "Jeff",
      "body": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, ullam eos dignissimos aperiam rerum qui suscipit cum nobis, totam ea tenetur perferendis praesentium corporis possimus ducimus et minima voluptatum. Numquam mollitia culpa consectetur unde illum est aut dicta eligendi vero molestias impedit sint, maiores saepe voluptas necessitatibus excepturi ducimus repudiandae, non quidem nobis veritatis! Libero neque, cumque illo est corrupti eaque recusandae ipsum, ut debitis vitae molestias deleniti voluptates distinctio sapiente autem. Tempore aperiam minima sit atque, tempora doloribus blanditiis id ipsum. Distinctio quos nisi, totam sunt ex voluptatum? Neque alias laborum ipsum doloremque fuga earum in autem. Hic alias omnis facilis facere eum assumenda deleniti ad, maiores laudantium temporibus odio non, molestiae dolorum! Quo mollitia ex sapiente maiores excepturi?"
    }
  ]
}

这是我的 UseFetch 钩子：

import { useEffect, useState } from "react";
function UseFetch({urlParam}){
    
    const [data,setData] = useState([]);
    const [isDepending,setIsDepending] = useState(false);
    const [error, setError] = useState(null);
    const [url,setUrl] = useState(urlParam);
    useEffect(() => {
            async function fetchingData() {
            setIsDepending(true)
            
            try{
                const fetchingProcess = await fetch(url);
                if(!fetchingProcess.ok){
                    throw new Error('bad connection')
                }
                const jsonData = await fetchingProcess.json();
                console.log(jsonData);
                setIsDepending(false)
                setData(jsonData)
            }catch(e){
                setError('sorry request encountred a problem')
                setIsDepending(false)
            }
        }
        
        fetchingData();
        setUrl(urlParam);
    }, [url])
    return {data, isDepending, error};
}
export default UseFetch;

毕竟，我在记录错误时将其发送到控制台

Unexpected token < in JSON at position 0

reactApp 和 json-server 位于 2 个单独的端口上。

Answer 1

我将其分解为一个仅包含基本部分的组件，并且 JSON 可以正常工作。不知道为什么它不适用于您的流程，但我怀疑这是您获取数据的方式......也许是fetchingProcess.json();。

也许可以试试这个。从下面的屏幕截图中可以看出，使用您的 JSON 数据对我来说效果很好：

import React, { useEffect, useState } from "react";
import axios from "axios";

function TestMe(props) {
  const [loading, setLoading] = useState(true);
  const [info, setInfo] = useState({});

  useEffect(() => {
    (async function () {
      const response = await axios.get("/flat/test.json");
      const jsonData = await response.data.articles;

      setInfo(jsonData);
      setLoading(false);

      console.log("data", jsonData);
    })();
  }, []);

  return (
    <>
      {loading ? (
        <div className="load"></div>
      ) : (
        <>
          <div className="article">
            {info.map((item, index) => (
              <div key={index} className="article-text">
                <h1>{item.title}</h1>
                <h2>{item.author}</h2>
                <p>{item.body}</p>
              </div>
            ))}
          </div>
        </>
      )}
    </>
  );
}

export default TestMe;