Question

我有什么

2个功能 -

getListInfo - 这里我正在检查一个对象是否存在，如果没有，则创建它，然后返回它。
getInitialState - react native的默认函数。

我想要实现的目标

尝试从getInitialState调用getListInfo，并最终填充listview。

但是，发生了什么 -

即使在返回值obj之前，整个页面的代码也会被执行。因此，问题是，列表视图将数据视为未定义。

我所知道的

使用承诺来解决问题。但是，不是正确的方式。

实际代码 -

getListInfo : function() {
    AsyncStorage.getItem('listobject').then((obj) => {
    if(obj == undefined)
    {
        var obj1 ={};
        obj1.data ={};
        obj1.data.isdirty = true;
        console.log("obj1 = "+ JSON.stringify(obj1));
        AsyncStorage.setItem('listobject',obj1);
        obj = AsyncStorage.getItem('listobject');
        console.log("obj = "+ JSON.stringify(obj));
    }
    if(obj.data.isdirty)
    {
        obj.data.isdirty = false;
        AsyncStorage.setItem('listobject',JSON.stringify(obj));
        return AsyncStorage.getItem('listobject');
    }
}).done();
},


  getInitialState: function() {
    applistglobal = this.checkLocalStore();

    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    return {
      dataSource: ds.cloneWithRows(this._genRows({})),
    };
  },


render: function() {
    /* BLAH BLAH BLAH */
}

承诺部分代码（getInitialState函数） - 我使用了promises，但是，即使函数调用失败了。所以，请忽略这部分代码并评估上面的代码。

getInitialState: function() {
    var promise = new Promise(function (resolve, reject) {
      resolve(this.getListInfo());
    });

    promise.then((listobject) => {
      console.log("getInitialState listobject "+listobject);
    })

    promise.catch((error) => {
      console.log("ERROR"+error);
    })

    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    return {
      dataSource: ds.cloneWithRows(this._genRows({})),
    };
  },

Answer 1

你设置的方式不是通常的做法。在getInitialState中发出请求。当promise完成时返回空状态和setState。您可以在componentWillMount或componentDidMount中启动请求。在react-native站点上查看此示例https://facebook.github.io/react-native/docs/asyncstorage.html。他们正在使用ES7异步构造。

在react-native中实现promise和AsyncStorage

1 个答案: