Question

我是Android开发人员，但我不熟悉JavaScript或本地反应。我正在关注Facebook的本地反应tutorial，我能够将其示例代码复制粘贴到我的index.android.js中，然后点击“R-R＆＃39;键，在我的模拟器中查看生成的UI，直到此网络部分。代码示例没有显示fetch如何与render（）连接，因此只是一个摘录而不再可编译。我试图把它放在render（）{返回如下代码，但它抛出错误

myFetch.render（）：必须返回有效的React元素（或null）。您可能已经返回了undefined，数组或其他一些无效对象。

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（）方法必须返回React element (or null)，如<View></View>。

网络请求应在componentDidMount()或其他Lifecycle method中实施。

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

2 个答案: