尝试在 React App 中“获取”json 时找不到文件错误

Question

Am trying to read a Json file in my react app, but console shows that the url for my json file is 404. Can any one please look into what is wrong in my code

Below is the error shown in browser console. When I open the json url that is shown in network tab, it redirects to the page instead of showing json -

Below is my code -

-

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;

My Json is as below -

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

Answer 1

Since JSON file is already inside the react application you can import it directly. you can use fetch to get JSON/XML responses from other servers/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;

Answer 2

I faced this situation today. Got to know what was happening. It seems the app is looking for the JSON file at the root level or inside the public folder present at the root level.
And if someone still looking for a solution related to the usage of local JSON (mimicking server calls) then make sure you put the JSON at the root level of your project. So there could be two scenarios I can think of -

1. If you have a public folder at root level --> I am taking the above scenario mentioned in the question. Your JSON should be present inside /public/json/results.json
2. If you don't have a public folder --> Put the JSON file at the root level same as your src .