1

嗨，我想制作一个带有列表的屏幕，我可以在其中显示用户保存为收藏的内容。我使用本地 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,
    };

  }
4

2 回答 2

1

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

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

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

或者您可以使用awaites7 附带的概念来处理 promise。文档中的一个示例（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
}

或者，您可以创建自己的承诺，并使用以下方式返回承诺resolve：

var getFavouriteData = new Promise(function(resolve, reject){
  AsyncStorage.getitem().then((data) => {
    resolve(data);
  });
});
于 2017-03-28T14:12:50.447 回答
1

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

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

希望这对其他人有帮助！

于 2017-08-08T16:22:25.510 回答