Question

我尝试重新创建文档中使用的示例https://facebook.github.io/react-native/docs/network.html

componentDidMount: function(){
        this.createRow();
    },

createRow : function(){
        var results = fetch('https://facebook.github.io/react-native/movies.json')
            .then((response) => response.json())
            .then((responseJson) => {
                return responseJson.movies;
            });
        this.setState({
            'xyz' : results,
            'people' : [{'name':'something_else', 'email':'email@gmail.com'}, {'name':'morgan', 'email':'mogo@gmail.com'}]

        });
    },

然而，当我在render方法

中打印结果时

render: function(){
        console.log(this.state.xyz)

我得到：第一次页面呈现时undefined（并且xyz尚未设置，因此有意义）

Promise { <state>: "pending" }第二次呈现页面时createRow()从componentDidMount运行

为什么我会收到pending状态而不是示例显示的movies对象？

Answer 1

的情况是，当执行setState时（因为你的fetch是异步的，但是流程与fetch方法异步），你的promise仍然没有得到解决或拒绝，因为promise是处于挂起状态。所以，你需要在promise解析后调用setState。你可以试试这个：

createRow : function(){
        fetch('https://facebook.github.io/react-native/movies.json')
            .then((response) => response.json())
            .then((responseJson) => {
               this.setState({
                 'xyz' : responseJson.movies,
                 'people' : [{'name':'something_else', 'email':'email@gmail.com'}, {'name':'morgan', 'email':'mogo@gmail.com'}]

               });
            });
    },

在React中打印fetch（）的结果

1 个答案: