javascript 在 react-native 中实现 promises 和 AsyncStorage
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34094474/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Implementing promises and AsyncStorage in react-native
提问by bozzmob
What I have
我有的
2 functions-
2个功能-
getListInfo - here I am checking if an object exists, if not, create it, then, return it.
getInitialState - default function of react native.
getListInfo - 在这里我检查对象是否存在，如果不存在，则创建它，然后返回它。
getInitialState - react native 的默认函数。
What I want to achieve
我想要达到的目标
Try to call getListInfo from getInitialState, and eventually fill the listview.
尝试从 getInitialState 调用 getListInfo，并最终填充列表视图。
But, what is happening-
但是，发生了什么事——
The code of whole page is getting executed even before the value obj is being returned. So, the problem is, the List View is getting the data as undefined.
甚至在返回值 obj 之前，整个页面的代码就会被执行。所以，问题是，列表视图正在获取未定义的数据。
What I know
我知道的
To use promise to solve the problem. But, not the right way.
用promise来解决问题。但是，方法不对。
Actual Code -
实际代码 -
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 */
}
Promise part of the code(getInitialState function)- I have used promises, but, even the function call is failing. So, please ignore this part of the code and evaluate the above code.
代码的承诺部分（getInitialState 函数）- 我使用了承诺，但是，即使是函数调用也失败了。所以，请忽略这部分代码并评估上面的代码。
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({})),
};
},
采纳答案by agenthunt
The way you have set it up is not the usual practice.i.e Making requests in getInitialState. Return empty states and setState when promise completes. You can kick off the request in componentWillMount or componentDidMount. See this example https://facebook.github.io/react-native/docs/asyncstorage.htmlon react-native site. They are using ES7 async constructs though.
您设置它的方式不是通常的做法。即在 getInitialState 中发出请求。当 promise 完成时返回空状态和 setState。您可以在 componentWillMount 或 componentDidMount 中启动请求。在 react-native 站点上查看此示例https://facebook.github.io/react-native/docs/asyncstorage.html。不过他们使用的是 ES7 异步结构。
