Блог

Я создал json-сервер на локальном хосте:3001, но когда я получаю эти данные, он возвращает мне 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?"  }  ] }  

и вот мой полезный крючок :

 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(() =gt; {  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 lt; in JSON at position 0  

reactApp и json-сервер находятся на 2 отдельных портах.

Я разбил его на компонент, содержащий только основные части, и 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(() =gt; {  (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 (  lt;gt;  {loading ? (  lt;div className="load"gt;lt;/divgt;  ) : (  lt;gt;  lt;div className="article"gt;  {info.map((item, index) =gt; (  lt;div key={index} className="article-text"gt;  lt;h1gt;{item.title}lt;/h1gt;  lt;h2gt;{item.author}lt;/h2gt;  lt;pgt;{item.body}lt;/pgt;  lt;/divgt;  ))}  lt;/divgt;  lt;/gt;  )}  lt;/gt;  ); }  export default TestMe;