APIリクエストの結果をReactで表示できません

Question

Reactを使い始めたばかりで、文字通り最も基本的なことを可能にすることが信じられないほど難しいと私は驚いています。私がしたいのは、リクエストを作成し、レスポンスを表示することだけです。ここに私のコードです：私は、レンダリングのawaitで使用することはできません

import React from 'react'; 
import 'whatwg-fetch'; 

export default class App extends React.Component { 
    async testBackend() { 
     let response = await fetch('http://localhost:8000/test', { credentials: 'include' }); 
     return response.json(); 
    } 

    render() { 
     let status = await this.testBackend(); 
     return (
      <div style={{ textAlign: 'center' }}> 
       <h1>Hello World</h1> 
       <p>{status}</p> 
      </div> 
     ); 
    } 
} 

（）非同期（async）、それをせずに、しかし、それは約束を返しますので、私はそれをaysncすることはできません。 render（）でthen（）を使用することはできません。なぜなら、Promiseも返されるからです。レンダリング結果をstateに格納することはできません。なぜなら、render（）が呼び出されるまでにはそこには存在しないからです。だから私は何をしますか？

これはなぜ難しいですか？まともな言語であれば、API呼び出しをブロックするだけで済みます。

Answer 1

はデータを返し、その後（response.jsonを待つ）と：

// async function 
async function fetchAsync() { 
    // await response of fetch call 
    let response = await fetch('https://api.github.com'); 
    // only proceed once promise is resolved 
    let data = await response.json(); 
    // only proceed once second promise is resolved 
    return data; 
} 

とあなたのコードのために：

export default class App extends React.Component { 
    constructor(..args) { 
     super(..args); 
     this.state= { 
      status: '' 
     }; 
    } 
async testBackend() { 
    let response = await fetch('http://localhost:8000/test', { credentials: 'include' }); 
    let data = await response.text(); // for string 
    return data; 
} 

componentDidMount() { 
    this.testBackend().then((data) => { 
     this.setState({ 
      status: data 
     }) 
    } 
} 
render() { 

    return (
     <div style={{ textAlign: 'center' }}> 
      <h1>Hello World</h1> 
      <p>{this.state.status}</p> 
     </div> 
    ); 

}}

Answer 2

あなたが読んしたい場合がありますライフサイクル、小道具&の州についてあなたがリアクションの方法で望んでいるものを実装することについて語る文書を反論する。

通常、この種のネットワーク要求はcomponentDidMountから起動され、ネットワーク要求が完了するとコンポーネントの状態が変更されます。

https://facebook.github.io/react/docs/react-component.html#componentdidmount

そして変化の状態に/小道具は自動的にコンポーネントを再レンダリングします。