Как достать данные из файла JSON в React?

Question

[JekaHC]

Есть файл JSON.
Есть компоненты React.
Ссылка на весь репозиторий.

На данный момент в файле Main.jsx пытаюсь вытянуть данный из JSON файла "products.json" и провести с ними дальнейшие манипуляции (Product.jsx; Products.jsx).

В конечном результате получаю "Nothing found" (условие в Products.jsx).

Вопрос - в чём заключается проблема, почему не получается отобразить данные?

Main.jsx

import React from "react"
import { Products } from '../Products'

class Main extends React.Component {

        


    state = {
        products: [],
    }


    componentDidMount() {
        fetch('./products.json' )
            .then((responce) => responce.json())
            .then((data) => this.setState({products:data}))
    }



    render() {
        const {products} = this.state;



        return (
            <main className="container content" >
                <Products products={products} />       
            </main>
        );
    }






}
   

export {Main}

Product.jsx

function Product (props) {

    const {
        prod_id: id,
        prod_name : title,
        prod_status: status,
        prod_price: price,
        prod_oldprice : oldPrice
    } = props;

    return <div className="product_item">
    <img className="product_img" src="" alt="" />
    <h3 className="product_title">{title}</h3>
    <hr />
    <div className="product_price">{price}</div>
    <div className="product_old_price">{oldPrice}</div>
    <div className="id">{id}</div>
    <div className="status">{status}</div>
    </div>

}

export {Product}

Products.jsx

import {Product} from './Product';

function Products (props) {

    const {products = []} = props;

    return (
    
    <div className="products">
        {products.length ? (
        products.map((product) => <Product key={product.prod_id} {...product} />)
        ) : (
            <h4>Nothing found</h4>
        )}
    </div>
    );

}

export {Products}

Comments

[ArturMavlidov]

в main.jsx законсоль state после того как засеттил в него response

[JekaHC]

ArturMavlidov,
Вот такой результат в консоли...


Для вывода в консоль дополнил функцию componentDidMount

componentDidMount() {
        fetch('./products.json' )
            .then((responce) => responce.json())
            .then((data) => this.setState({products:data}))
        console.log('Вывод после SetState')
        console.log(this.state)
    }

[ArturMavlidov]

JekaHC, тут есть вероятность, что консоль вывелась до того, как засеттился json в state. Напиши:

componentDidMount() {
        fetch('./products.json' )
            .then((responce) => responce.json())
             .then((data) => console.log('data', data))
            .then((data) => this.setState({products:data}))
            .then(() => console.log('state', this.state))
    }

Увидим, что приходит от json и что сеттится в state

[JekaHC]

ArturMavlidov,
Скриншот 1


Продолжение 2


Продолжение 3


Написал так-же как ты попросил

componentDidMount() {
        fetch('./products.json' )
            .then((responce) => responce.json())
             .then((data) => console.log('data', data))
            .then((data) => this.setState({products:data}))
            .then(() => console.log('state', this.state))
    }

[ArturMavlidov]

JekaHC, в state не сеттится почему-то. Вообще, у тебя state изначально указан как массив, а ты сеттишь объект, попробуй указать state как объект {} или оставить в массивом и сеттить в него Object.keys(data)

[wonderingpeanut]

ArturMavlidov, Object.keys(data) присвоит массиву только ключи объекта.

[JekaHC]

ArturMavlidov, не совсем понял где нужно поменять state na обьект

[ArturMavlidov]

JekaHC, ну, где объявляешь state

[JekaHC]

ArturMavlidov,

Отметил где я хотел поставить, но синтаксис начинает красным светиться. Скорее всего я не понимаю что ты имеешь ввиду

import React from "react"
import { Products } from '../Products'

class Main extends React.Component {

        


    state = {              /// [
        products: {},    ///
    }                         /// ] 


    componentDidMount() {
        fetch('./products.json' )
            .then((responce) => responce.json())
            .then((data) => console.log('data', data))
            .then((data) => this.setState({products:data}))
        .then(() => console.log('state', this.state))
    }



    render() {
        const {products} = this.state;



        return (
            <main className="container content" >
                <Products products={products} />       
            </main>
        );
    }

[ArturMavlidov]

JekaHC, я именно это имел в виду, очень странно. Я подумаю, но пока не могу помочь, не работал с классовыми компонентами (Устаревший подход), тебе тоже советую учить именно функциональные компоненты. Классовые попадаются скорее в старых проектах

[JekaHC]

ArturMavlidov, ну так мне главное получить те данные, если нужно что-то поменять то говори, текущий подход не обязателен

Answer 1

[HealSpirit]

import React from "react";
import { Products } from "../Products";

class Main extends React.Component {
  state = {
    products: [],
  };

  componentDidMount() {
    fetch("./products.json")
      .then((responce) => responce.json())
      .then((data) => this.setState({ products: Object.values(data) }));
  }

  render() {
    const { products } = this.state;

    return (
      <main className="container content">
        <Products products={products} />
      </main>
    );
  }
}

export { Main };

Странный json, если честно. Обычно, такие вещи хранятся в массиве у какого-то поля в JSON.
Надо бы еще убрать элемент массива 200, который получился после преобразования "response_code": 200 -> 200,
убрать 2 предупреждения в консоли:
1) немного поменялась инициализация приложения после перехода на 18 версию реакта
2) если распечатываешь компоненты из массива, нужно каждому элементу добавить атрибут/свойство key. Использовать надо какое-то уникальное значение (например, id). Если его нет, на крайняк использовать index текущей итерации

Comments

[JekaHC]

Браво! Ваше решение работает, но в консоли есть следующая ошибка

[HealSpirit]

JekaHC, Какая из?) Я же писал выше про эти ошибки.
Первую исправить можно так
заменить в index.js c

import React from 'react';
import * as ReactDOMClient from 'react-dom';
import './index.css';
import App from './App';

const container = document.getElementById('root');
const root = ReactDOMClient.createRoot(container);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

на

import { createRoot } from "react-dom/client";
import App from "./App";

const container = document.getElementById("root");
const root = createRoot(container);

root.render(<App />);

На счет второй ошибки нужно самому попытаться исправить и предложить решение