带有 ListView 的 AsyncStorage 反应本机

Question

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

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,
    };

  }

Answer 1

正如你所说，AsyncStorage.getItemreturn是一个承诺，所以你必须把它当作一个承诺来处理。

您需要依赖 AsyncStorage.getItem() 的响应，以确保它已得到处理。您可以使用 then 来处理这个问题。一旦承诺 returned，状态将被异步设置：

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

或者你可以使用 await 来处理承诺，这是 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
}

或者，您可以创建自己的承诺，并且 return 使用 resolve:

的承诺

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

Answer 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>
    );
  }

希望这对其他人有帮助！

带有 ListView 的 AsyncStorage 反应本机

AsyncStorage with ListView react native

react-native

asyncstorage