AsyncStorage 与 ListView 反应原生答案

【问题标题】：AsyncStorage with ListView react nativeAsyncStorage 与 ListView 反应原生
【发布时间】：2017-03-28 12:04:37
【问题描述】：

您好，我想制作一个带有列表的屏幕，我可以在其中显示用户保存为收藏的内容。我使用本地 json 文件来保存原始数据。从那里我想将最喜欢的数据保存在 AsyncStorage 上。 AsyncStorage 返回一个承诺，我无法将它添加到状态中。我该怎么做？

const  ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
let a
export default class List extends React.Component {


  constructor(props) {
    let resultData = new Array;
    super(props)
    const dataPoem =  AsyncStorage.getItem('PoemDB', (err, result) => {
        a = JSON.parse(result)
        return result

    });

    console.log
   this.state = {
    dataSource: ds.cloneWithRows(dataPoem),
      counter: 1,
      fontLoaded: false,
    };

  }

【问题讨论】：

我建议您在此处发布您的代码，添加您尝试解决问题的几种方法以及这些尝试的结果。
我跟着你！

标签： react-native asyncstorage

【解决方案1】：

正如你所说，AsyncStorage.getItem 返回一个promise，所以你必须把它当作一个promise 来处理。

您需要依赖来自AsyncStorage.getItem() 的响应，以便您可以确定它已得到处理。您可以使用then 处理此问题。一旦 promise 返回，状态将被异步设置：

var dataPoem = function(){
  AsyncStorage.getItem('PoemDB').then((data) => {
       this.setState({
         dataSource: ds.cloneWithRows(data),
       });
  });
}

或者你可以使用await 来处理promise，这是一个es7 自带的概念。来自文档 (https://facebook.github.io/react-native/docs/asyncstorage.html) 的示例：

try {
  const value = await AsyncStorage.getItem('@MySuperStore:key');
  if (value !== null){
    // We have data!!
    console.log(value);
  }
} catch (error) {
  // Error retrieving data
}

或者，您可以创建自己的 Promise，并使用 resolve 返回一个 Promise：

var getFavouriteData = new Promise(function(resolve, reject){
  AsyncStorage.getitem().then((data) => {
    resolve(data);
  });
});

【讨论】：

这个回报承诺。我得到` {"_45":0,"_81":0,"_65":null,"_54":null}` 在这种情况下我该如何处理这个承诺？
我最近也遇到了同样的问题！我会在几个小时后回来帮忙上课。
我会尝试第一个解决方案，然后使用，然后我会将它放在构造函数中。我相信它会奏效。
是的！第一个解决方案有效，但我必须再次使用async componentWillMount() 和内部await AsyncStorage.getItem('PoemDB').then((data) => {}

【解决方案2】：

你不需要用这个来做一个条件状态

    constructor(props) {

    super(props);
    const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });

    this.state = {
      dataSource: ds
    }

  }

  componentDidMount = async () => {
    try {
      const value = await AsyncStorage.getItem('@MySuperStore:key');
      if (value !== null) {
        this.setState({
          dataSource: this.state.dataSource.cloneWithRows(JSON.parse(value))
        });
      }
    } catch (error) {
      // Error retrieving data
    }

  }

渲染

render() {
    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={(data) => this.renderRow(data)}
      />
    );
  }



renderRow = (data) => {
    return (
     console.log(data);
      <View>
        <Text>.....<Text>
      </View>
    );
  }

希望这对其他人有帮助！

【讨论】：