Question

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

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.getItem会返回承诺，因此您必须将其作为承诺处理。

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

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
}

或者，您可以创建自己的承诺，并使用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反应原生

2 个答案: