react-native helloWorldAppで返り値を取得する方法は？

Question

私はAndroidの開発者ですが、JavaScriptや反応しやすいネイティブです。私はFacebookの反応ネイティブtutorialに従っていました。このネットワークセクションまでシミュレータで結果のUIを表示するには、サンプルコードをindex.android.jsにコピーして貼り付けて「R-R」キーをクリックすることができました。コードサンプルは、fetchがrender（）でどのように接続されているかを示していないため、抜粋だけであり、もはやコンパイルできません。レンダー（）内に配置しようとしましたが、以下のコードのように戻りますが、エラーをスローします。

myFetch.render（）：有効なReact要素（またはnull）を返す必要があります。未定義、配列またはその他の無効なオブジェクトが返された可能性があります。最も簡単な方法でそれを修正する方法

class myFetch extends Component{ 


render(){ 
    return (

    fetch('https://facebook.github.io/react-native/movies.json') 
    .then((response) => response.json()) 
    .then((responseJson) => { 
     return responseJson.movies; 
    }) 
    .catch((error) => { 
     console.error(error); 
    }) 

    ); 
}; 
} 

AppRegistry.registerComponent('HelloWorldApp',() => myFetch); 

、および、読むためのポインタ何してくださいですか？

Answer 1

レンダリング（）メソッドは、<View></View>ようReact element (or null)を返さなければなりません。

そして、ネットワーク要求はcomponentDidMount()または他のLifecycle methodに実装する必要があります。

Answer 2

class myFetch extends Component{ 
    constructor(props){ 
     super(props); 
     this.state = {movies: 'init'}; 
    } 

componentDidMount() { 
    fetch('https://facebook.github.io/react-native/movies.json') 
     .then((response) => response.json()) 
     .then((responseJson) => {this.setState({movies: responseJson.title});}) 
     .catch((error) => { 
      console.error(error); 
     }) 
} 

render(){ 
    return (
     <Text>{this.state.movies}</Text> 
    ); 
} 

}

AppRegistry.registerComponent('HelloWorldApp',() => myFetch);