Wie kann ich setState in reaktionsnativen nach dem Abrufen neuer Daten verwenden?

Question

Um mehr über react-native zu erfahren, versuche ich eine einfache Anwendung zu erstellen.

Diese Anwendung druckt zunächst "HELLO WORLD", danach ersetzt sie diesen Text durch den Inhalt einer JSON-Datei, die sie abruft (in meinem Test enthält sie {'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); 

Dies funktioniert, dass es HALLO WORLD zeigt und holt dann die json, aber ich schaffte es nicht, um es zu bekommen, die neue Nachricht anzuzeigen. Stattdessen bekomme ich diesen Fehler:

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

Ich fühle mich wie ich es falsch mache. Soll ich setState nicht innerhalb des Konstruktors aufrufen? Bekomme ich nicht den richtigen Kontext?

Was ist der erwartete Weg?

Answer 1

Sie können es tun, wie die

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