fetch запрос к json файлу на react

Рейтинг: 0Ответов: 0Опубликовано: 17.08.2023

Всем добрых суток! Возникла проблема: Как сделать фильтрацию, чтобы по определённому роуту выводило поле text (из файла json), которое относится к своему title или id?

Есть роут:

<Route path="/article/:id/:title" element={<BlogPost />} />

есть две страницы, которые связаны с блогом: Blog.jsx:

import React, { useEffect, useState } from 'react'
import './Blog.css'
import Navbar from '../../components/Navbar/Navbar'
import Footer from '../../components/Footer/Footer'
import CardBlog from '../../components/CardBlog/CardBlog'
import Loader from '../../components/Loader/Loader'

function Blog() {
  const [loading, setLoading] = useState(true);
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch("http://localhost:5000/api/posts")
      .then((response) => response.json())
      .then((data) => {
        setPosts(data.posts);
        setLoading(false);
      })
      .catch((error) => {
        console.error("Ошибка получения данных:", error);
      });
  }, []);

  return (
    <div className="blog-page">
      <Navbar />
      <div className="header-blog">
        <h1>Статьи</h1>
      </div>
      <div className="blog-component">
        <div className="container-article">
          {loading ? (<Loader />) : (
            posts.map((post, index) => (
              <div key={index}>
                <CardBlog id={post.id} title={post.title} description={post.description} />
              </div>
            ))
          )}
        </div>
      </div>
      <Footer />
    </div>
  )
}

export default Blog

BlogPost.jsx: (страница для того чтобы выводить текст который относится к теме статьи)

import React, { useState, useEffect } from 'react'
import { useParams } from 'react-router-dom';
import './BlogPost.css'

function BlogPost() {
  const { id, title } = useParams();
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    (async () => {
      await fetch("http://localhost:5000/api/posts")
        .then((response) => response.json())
        .then((data) => {
          setPosts(data.posts);
          console.log(data.posts)
        })
        .catch((error) => {
          console.error("Ошибка получения данных:", error);
        });
    })()

  }, []);

  const post = posts.find((post) => post.id === parseInt(id) && post.title === title);

  return (
    <div>
      s
      <h1>{post.text}</h1>
    </div>
  );
}

export default BlogPost

Сам json файл, который лежит на бэкенде в http://localhost:5000/api/posts:

{
  "posts": [
    {
      "id": 1,
      "title": "Release Russian Tech 2023",
      "description": "Проект запустился, а значит пора заявить о себе!",
      "text": "sdsdsdsdsdss"
    },
    {
      "id": 2,
      "title": "Дальнейшие планы и как всё будет",
      "description": "В этой статье разберём планы дальнейшего развития нашей платформы",
      "text": "sdsdsdsdsdss"
    },
    {
      "id": 3,
      "title": "Интерактивная игра для тех, кто помладше",
      "description": "Расскажем о том, как будет происходить реализация игры для самых маленьких и поговорим о стеке, проанализируем",
      "text": "sdsdsdsdsdss"
    },
    {
      "id": 3,
      "title": "Заголовок статьи 4",
      "description": "Описание статьи 4",
      "text": "sdsdsdsdsdss"
    }
  ]
}

Ошибки в консоли:

Warning: React does not recognize the `classNameName` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `classnamename` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    at div
    at div
    at div
    at Loader
    at div
    at div
    at div
    at Blog (http://localhost:3000/static/js/bundle.js:1537:80)
    at RenderedRoute (http://localhost:3000/static/js/bundle.js:42851:5)
    at Routes (http://localhost:3000/static/js/bundle.js:43483:5)
    at Suspense
    at Router
    at div
    at App
    at Router (http://localhost:3000/static/js/bundle.js:43421:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:41524:5)
printWarning @ react-dom.development.js:86
error @ react-dom.development.js:60
validateProperty$1 @ react-dom.development.js:3757
warnUnknownProperties @ react-dom.development.js:3803
validateProperties$2 @ react-dom.development.js:3827
validatePropertiesInDevelopment @ react-dom.development.js:9541
setInitialProperties @ react-dom.development.js:9830
finalizeInitialChildren @ react-dom.development.js:10950
completeWork @ react-dom.development.js:22193
completeUnitOfWork @ react-dom.development.js:26596
performUnitOfWork @ react-dom.development.js:26568
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
BlogPost.jsx:28 Uncaught TypeError: Cannot read properties of undefined (reading 'text')
    at BlogPost (BlogPost.jsx:28:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)
BlogPost @ BlogPost.jsx:28
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20074
beginWork @ react-dom.development.js:21587
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performSyncWorkOnRoot @ react-dom.development.js:26085
flushSyncCallbacks @ react-dom.development.js:12042
(anonymous) @ react-dom.development.js:25651
BlogPost.jsx:28 Uncaught TypeError: Cannot read properties of undefined (reading 'text')
    at BlogPost (BlogPost.jsx:28:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)
BlogPost @ BlogPost.jsx:28
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20074
beginWork @ react-dom.development.js:21587
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
recoverFromConcurrentError @ react-dom.development.js:25850
performSyncWorkOnRoot @ react-dom.development.js:26096
flushSyncCallbacks @ react-dom.development.js:12042
(anonymous) @ react-dom.development.js:25651
react-dom.development.js:18687 The above error occurred in the <BlogPost> component:

    at BlogPost (http://localhost:3000/static/js/bundle.js:1678:66)
    at RenderedRoute (http://localhost:3000/static/js/bundle.js:42851:5)
    at Routes (http://localhost:3000/static/js/bundle.js:43483:5)
    at Suspense
    at Router
    at div
    at App
    at Router (http://localhost:3000/static/js/bundle.js:43421:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:41524:5)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18687
update.callback @ react-dom.development.js:18720
callCallback @ react-dom.development.js:13923
commitUpdateQueue @ react-dom.development.js:13944
commitLayoutEffectOnFiber @ react-dom.development.js:23391
commitLayoutMountEffects_complete @ react-dom.development.js:24688
commitLayoutEffects_begin @ react-dom.development.js:24674
commitLayoutEffects @ react-dom.development.js:24612
commitRootImpl @ react-dom.development.js:26823
commitRoot @ react-dom.development.js:26682
performSyncWorkOnRoot @ react-dom.development.js:26117
flushSyncCallbacks @ react-dom.development.js:12042
(anonymous) @ react-dom.development.js:25651
BlogPost.jsx:28 Uncaught TypeError: Cannot read properties of undefined (reading 'text')
    at BlogPost (BlogPost.jsx:28:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at beginWork$1 (react-dom.development.js:27426:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)
    at renderRootSync (react-dom.development.js:26434:1)
    at recoverFromConcurrentError (react-dom.development.js:25850:1)
    at performSyncWorkOnRoot (react-dom.development.js:26096:1)
BlogPost @ BlogPost.jsx:28
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20074
beginWork @ react-dom.development.js:21587
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
recoverFromConcurrentError @ react-dom.development.js:25850
performSyncWorkOnRoot @ react-dom.development.js:26096
flushSyncCallbacks @ react-dom.development.js:12042
(anonymous) @ react-dom.development.js:25651
json reactjs node.js fetch express
Источник: Stack Overflow на русском

Ответы

Ответов пока нет.