ReactJS fetch then()无法识别

时间:2017-10-26 17:01:38

标签: reactjs

我正在使用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。

4 个答案:

答案 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

将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>
    )
}