Question

我使用react和fetch遇到了一些意外行为。它应该非常直接。

我的代码如下所示：

import React, { Component } from 'react';

class App extends Component {

  componentDidMount() {
    fetch('/dict.json')
    .then(res => res.json())
    .then(json => console.log(json))
  }

 render() {
    return (
     <p>Example</p>
   );
  }
}

我的文件夹结构如下所示

- src
   |_app.js
   |_dict.json
- index.html

当我检查网络时，它正在请求index.html页面，这对我没用。有没有人经历过这个？

Answer 1

生产：如果此代码将在生产中运行，那么除非您已设置Web服务器来提供该JSON文件，否则fetch无法在此处运行，但是，您可以改为导入本地JSON文件：

import dict from './_dict.json';

然后在你的componentDidMount内，你可以映射它

let results = dict.map((item, index) => {
   // ...
});

Localhost ：如果您只是想在localhost上运行此功能，那么我不明白为什么它不起作用，除非我怀疑是你的React应用程序将HTTP请求代理到本地Web服务器（在Reactjs开发中非常常见），并且本地Web服务器未设置为提供JSON文件。所以检查你的package.json或webpack设置是这样的：

"proxy": "http://localhost:8080"

并配置在该端口上运行的Web服务器，以响应请求提供JSON文件。

Answer 2

尝试使用此文件结构

- public
   |_index.html
   |_dict.json
- src
   |_app.js

对本地JSON文件的React fetch请求返回index.html而不是JSON文件

2 个答案: