我正在使用ReactJS构建项目,并且正在尝试阅读我已经编写过的本地JSON文件。
我有一个app.js文件,如下所示:
import React, {Component} from 'react';
import fetch from 'isomorphic-fetch'
import './App.css';
class App extends Component {
getData() {
return fetch('./examples/test.JSON').then(response => {
return response.json();
});
}
componentDidMount() {
console.log(this.getData());
}
render() {
return (
...
);
}
}
导出默认App;
getData函数尝试获取JSON文件并返回响应。但是,then()函数和json()函数都不被识别。
我缺少进口吗?我以为他们会来自isomorphic-fetch。
答案 0 :(得分:1)
通过isomorphic-fetch文档阅读,您将在自述文件的顶部看到警告:
你必须携带自己的ES6 Promise兼容的polyfill,我建议es6-promise。
尝试按照README:
的建议安装和包含polyfill require('es6-promise').polyfill();
require('isomorphic-fetch');
我的猜测是,这会使.then
有效。
答案 1 :(得分:1)
你在期待什么?如果您希望console.log(this.getData())
输出数据,那么您使用的提取错误。 this.getData()
的结果仍然是一个承诺,因为response.json()
的结果也是一个承诺,而不是实际的数据。像这样修改你的代码:
componentDidMount() {
//console.log(this.getData());
this.getData().then(jsonData => {
console.log(jsonData);
});
}
这就是为什么你在examples for isomorphic-fetch
中看到他们有第二个.then()
方法来使用response.json()
的结果;
fetch('//offline-news-api.herokuapp.com/stories')
.then(function(response) {
if (response.status >= 400) {
throw new Error("Bad response from server");
}
return response.json();
})
.then(function(stories) {
console.log(stories);
});
答案 2 :(得分:0)
如果您想从另一个文件中获取数据JSON数据,那么您可以直接从该文件中导出该JSON const并导入该cont并使用它。
像
从文件中导出你的json
Test.js
export default const json = {
A:1, b:2
//......
}
在abc.js
Import json from "Test.js"
Comsole.log(" a is ", json.A)
// a is 1
我认为isomorphic-fetch用于进行api调用而不是访问本地文件。
答案 3 :(得分:0)
为什么不使用axios?
只需通过npm install --save axios
然后这样做
....
import axios from 'axios';
....
async function getData(){
const res = await axios.get('./examples/test.JSON');
console.log(res);
return res;
}
render(){
return(
<div>{this.getData()}</div>
)
}