如何在react-native helloWorldApp中呈现返回提取结果？

Question

我是一名Android开发人员，但刚接触JavaScript或反应原生。我正在关注Facebook的反应原生tutorial，我能够将其示例代码复制粘贴到我的index.android.js中，并单击'R-R'键查看模拟器中生成的UI，直到此网络部分。该代码示例没有显示如何将提取与render（）联系起来，因此只是一个摘录，不再可编译。我试图把它放在render（）{return像下面的代码，但它抛出错误

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

渲染（）方法必须返回一个React element (or null)像<View></View>。

而网络请求应在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);