ReactJS fetch then（）が認識されない

Question

私は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 (
      ... 
     ); 
    } 
} 

輸出のデフォルトアプリケーションを。

getData関数は、JSONファイルを取得して応答を返します。しかし、then（）関数もjson（）関数も認識されません。

インポートはありますか？私は彼らが同形フェッチから来たと思った。

Answer 1

別のファイルからデータJSONデータを取得する場合は、そのファイルからJSON constを直接エクスポートし、そのcontをインポートして使用することができます。

abc.js

Import json from "Test.js" 

Comsole.log(" a is ", json.A) 
// a is 1 

で

Test.js

export default const json = { 
A:1, b:2 
//...... 
} 

ファイルからのJSON書き出し

ように、私は、同型フェッチと思いますが、APIを作るために使用されますローカルファイルにアクセスするのではなく、呼び出してください。

Answer 2

isomorphic-fetchドキュメントを通して読むと、あなたは、READMEの上部に警告が表示されます。

あなたがあなた自身のES6約束互換ポリフィルを持参しなければならない、私はES6-約束を示唆しています。

は彼らのREADMEに示唆されているようにインストールし、ポリフィルを含めてみてください。

require('es6-promise').polyfill();

require('isomorphic-fetch');

私の推測では、これが.then作品を作るということです。

Answer 3

なぜアキシャスを使用しないのですか？

単に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> 
    ) 
} 

Answer 4

あなたは何を期待しているのですか？ console.log(this.getData())がデータを出力することを期待している場合は、フェッチを間違って使用しています。 response.json()の結果も実際のデータではなく、約束であるため、this.getData()の結果は約束です。このようにコードを変更します。あなたは、彼らがresponse.json()の結果を消費するために第2 .then()の方法を持っているexamples for isomorphic-fetchに見る理由

componentDidMount() { 
    //console.log(this.getData()); 
    this.getData().then(jsonData => { 
     console.log(jsonData); 
    }); 
} 

です。

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