如何在react-native helloWorldApp中渲染返回fetch结果

Question

我是Android开发人员，但对JavaScript或react-native不熟悉。我一直在遵循Facebook的react-native教程，我能够将其示例代码复制粘贴到我的index.android.js中，然后点击"R-R"键，在我的模拟器中看到结果UI，直到这个网络部分。代码示例没有显示fetch如何与render()连接，因此只是一个摘录，不再可编译。我试图把它在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

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()方法必须返回一个类似于<View></View>的React element (or null)

网络请求应在componentDidMount()或其他生命周期方法中实现。