Question

我正在尝试在我的react应用程序中读取Json文件，但控制台显示我的json文件的网址为404。任何人都可以调查一下我的代码中有什么问题

下面是浏览器控制台中显示的错误。当我打开“网络”标签中显示的json网址时，它将重定向到页面，而不是显示json-

下面是我的代码-

-

library(tidyverse)
list(mtcars, cars, iris) %>%
     map(~ as_tibble(.x) %>%
              rownames_to_column) %>% 
     reduce(full_join, by = 'rowname')

我的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;

Answer 1

由于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;

Answer 2

我今天遇到了这种情况。才知道是怎么回事。该应用程序似乎正在根级别或根级别存在的公用文件夹中查找 JSON 文件。
如果有人仍在寻找与使用本地 JSON（模仿服务器调用）相关的解决方案，请确保将 JSON 放在项目的根级别。所以我能想到的可能有两种情况 -

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

尝试在React App中``获取''JSON时出现文件未找到错误

2 个答案: