新しいデータを取得した後、どのようにしてreact-nativeでsetStateを使用できますか？

Question

反応ネイティブについて学ぶために、私は単純なアプリケーションを構築しようとしています。

このアプリケーションは、最初に "HELLO WORLD"を印刷し、その後、このテキストを取り出すjsonファイルの内容で置き換えます（テストでは{'Goodbye'： 'World'}）。

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    Text, 
    View, 
} from 'react-native'; 

class FetchTextTest extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     content: "HELLO WORLD", 
    }; 
    fetch('http://echo.jsontest.com/goodbye/world').then(function(response) { 
      response.json().then(function(data) { 
      this.setState({content: JSON.stringfy(data)}); 
     }); 
    }); 
    } 
    render() { 
    return (
     <Text>{this.state.content}</Text> 
    ) 
    } 
} 

AppRegistry.registerComponent('FetchTextTest',() => FetchTextTest); 

これは、HELLO WORLDを表示してからJSONを取得し、私はそれが新しいメッセージを表示するために取得するために管理していないことで動作します。代わりにこのエラーが表示されます。

Possible unhandles Promise Rejection (id: 0): TypeError: undefined is not a function (evaluating 'this.setState 

私は間違っているように感じます。コンストラクタ内部からsetStateを呼び出すことはしないのですか？正しい文脈が得られないのですか？

これを行うにはどのような方法がありますか？

Answer 1

あなたは、あなたがURLからデータをフェッチするために管理方法

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    Text, 
    View, 
} from 'react-native'; 

export default class App extends Component { 
     constructor(props) { 
     super(props); 
     this.state = { 
      content: "", 
     }; 
     } 

     componentDidMount(){ 
     fetch('http://echo.jsontest.com/goodbye/world') 
      .then((response) => response.json()) 
      .then((responseJson) => { 
      this.setState({content: responseJson}); 
      }) 
      .catch((error) => { 
      console.error(error); 
      }); 
     } 

     render() { 
     return (
      <Text>{this.state.content.goodbye}</Text> 
     ) 
     } 
    } 

AppRegistry.registerComponent('FetchTextTest',() => FetchTextTest); 

expo link