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

Question

我试图在我的反应应用程序中读取 Json 文件，但控制台显示我的 json 文件的 url 是 404。任何人都可以看看我的代码有什么问题

以下是浏览器控制台中显示的错误。当我打开网络选项卡中显示的 json url 时，它会重定向到页面而不是显示 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 文件。
如果有人仍在寻找与使用本地 JSON（模仿服务器调用）相关的解决方案，那么请确保将 JSON 放在项目的根级别。所以我可以想到两种情况-

1. 如果您在根级别有一个public 文件夹--> 我正在考虑问题中提到的上述情况。您的 JSON 应该出现在 /public/json/results.json 中
2. 如果您没有 public 文件夹 --> 将 JSON 文件放在与您的 src 相同的根级别。

Answer 2

由于 JSON 文件已经在 react 应用程序中，您可以直接导入它。您可以使用 fetch 从其他服务器/API 获取 JSON/XML 响应

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;