为什么我的异步存储不立即同步

Question

我想在设置数据时立即从异步存储中得到响应但我似乎找不到办法这是我的代码

我的列表项 onpress => onLearnMore

onLearnMore = (rowData) => {
    this.setState({name:rowData.name}),
    this.setState({email:rowData.email}),
    this.setState({phone:rowData.phone}),
    this.setState({street:rowData.location.street}),
    this.setState({city:rowData.location.city}),
    this.setState({state:rowData.location.state}),
    this.setState({postcode:rowData.location.postcode}),
    this.saveData();
    //this.props.navigation.navigate('Details', { ...rowData });
  };

saveData 以将项目设置为异步存储

saveData(){
    let data = {
      name: this.state.name,
      email: this.state.email,
      phone: this.state.phone,
      street: this.state.street,
      city: this.state.city,
      state: this.state.state,
      postcode: this.state.postcode,
    }
    AsyncStorage.setItem('data',JSON.stringify(data));
    this.previewData();
  }

这是我的预览数据

  previewData = async () =>{
    try{
      let datachecker = await AsyncStorage.getItem('data');
      let parsed = JSON.parse(datachecker);
      alert(parsed.name);
    }catch(error){
      alert(error);
    }
  }

但显示设置为异步存储的项目的警报不会立即同步。我需要预览两次才能得到与设置状态属性相同的结果

更新错误案例我发现当你设置数据保存到asyncstorage时它可以立即同步，有没有办法修复它？

我很抱歉英语不好

Answer 1

顾名思义，它是异步存储的。为了在 setItem 完成时做一些操作，可以传递一个回调函数。检查 http://facebook.github.io/react-native/releases/0.49/docs/asyncstorage.html#setitem

您的代码需要

AsyncStorage.setItem('data',JSON.stringify(data), this.previewData.bind(this));

Answer 2

setState 在您的第一个方法 onLearnMore 中是异步的，您应该将所有更新批处理到一个 setState 并将回调传递给第二个参数。

onLearnMore = (rowData) => {
    this.setState({
      name: rowData.name,
      email: rowData.email,
      phone: rowData.phone,
      street: rowData.location.street,
      city: rowData.location.city,
      state: rowData.location.state,
      postcode: rowData.location.postcode
    }, () => {
     // setState second argument is a callback to be invoked
     // after updating state finished
     // this time you can now call any function that depends on the updated state
       this.saveData();
      //this.props.navigation.navigate('Details', { ...rowData })
    });

  };

在您的 saveData 函数中，AsyncStorage.setItem 也是异步的，并且 returns 您可以简单地使用 .then 或 await 的承诺，但如果您使用 await，请确保将 saveData 函数更改为异步。

使用.then

AsyncStorage.setItem('data',JSON.stringify(data)).then(this.previewData());

或使用 await

async saveData(){
    // omitted code
    await AsyncStorage.setItem('data',JSON.stringify(data));
    this.previewData();
  }

为什么我的异步存储不立即同步

why my asyncstorage do not sync immediately

react-native

async-await

asyncstorage