Ошибка файла не найдена при попытке извлечь json в приложении React

Question

Я пытаюсь прочитать файл Json в моем приложении реакции, но консоль показывает, что URL моего файла json равен 404. Может ли кто-нибудь посмотреть, что не так в моем коде

Ниже приведена ошибкаотображается в консоли браузера.Когда я открываю URL-адрес json, который отображается на вкладке сети, он перенаправляет на страницу вместо отображения json -

Ниже приведен мой код -

-

import React from 'react';
import Header from './Header';
import Container from './Container'
import Footer from './Footer'

class App extends React.Component{

    constructor(props) {
        super(props);
        this.state = {
          error: null,
          isLoaded: false,
          products: []
        };
      }
    componentDidMount() {
        fetch("../json/results.json",{
            headers : { 
                'Content-Type': 'application/json',
                'Accept': 'application/json'
               }
        })
        .then(res => res.json())
          .then(
              console.log("--------"),
            (result) => {
              this.setState({
                isLoaded: true,
                products: result.Products
              });
            },
            // Note: it's important to handle errors here
            // instead of a catch() block so that we don't swallow
            // exceptions from actual bugs in components.
            (error) => {
              this.setState({
                isLoaded: true,
                error
              });
            }
          )
      }

    render(){
        const { error, isLoaded, products } = this.state;
        if (error) {
            return <div>Error: {error.message}</div>;
          } else if (!isLoaded) {
            return <div>Loading...</div>;
          } else {
                return(
                    <div>
                    <Header />
                    <br></br>
                    <Container />
                    <ul>
                        {(products || []).map(item => (
                            <li key={item.content_id}>
                            {item.content_id} {item.content_type}
                            </li>
                        ))}
                    </ul>
                    <br></br>
                    <Footer />
                    </div>
                );
            }
    }
}

export default App;

Мой Json такой, как показано ниже -

{
    "Products": [
        {
        "content_id": "1211122910721",
        "content_type": "AVG_Product_C"
    ]
}

Answer 1

Поскольку файл JSON уже находится внутри приложения реакции, вы можете импортировать его напрямую.вы можете использовать fetch для получения JSON / XML-ответов от других серверов / API

import React from "react";
import Header from "./Header";
import Container from "./Container";
import Footer from "./Footer";
import JSONResult from '../json/results.json';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      products: JSONResult.Products || []
    };
  }
  render() {
    const { products } = this.state;
    return (
      <div>
        <Header />
        <br />
        <Container />
        <ul>
          {products.map(product => (
            <li key={product.content_id}>
              {product.content_id} {product.content_type}
            </li>
          ))}
        </ul>
        <br />
        <Footer />
      </div>
    );
  }
}

export default App;