如何在 react-native helloWorldApp 中呈现 return 获取结果？

Question

我是一名 Android 开发人员，但我是 JavaScript 或 react-native 的新手。我正在关注 Facebook 的 react-native tutorial，我能够将其示例代码复制粘贴到我的 index.android.js 中，然后单击 'R-R' 键以在我的模拟器中查看生成的 UI , 直到这个网络部分。代码示例没有显示 fetch 如何与 render() 挂钩，因此只是一个摘录，不再可编译。我试图像下面的代码一样将它放在 render(){return 中，但它抛出错误

myFetch.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

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

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);

Answer 2

render() 方法必须 return 一个 React element (or null) 就像 <View></View>.

并且网络请求应该在componentDidMount()或其他Lifecycle method中实现。

如何在 react-native helloWorldApp 中呈现 return 获取结果？

How to render return fetch results in react-native helloWorldApp?

fetch

react-native