Question

我正在开发一个react本机项目，其中向用户显示一个启动画面，并且启动画面从AsyncStorage读入以检查这是否是用户使用该应用程序的第一个，如果这样他们被定向到一个游览屏幕之后，按下继续按钮后，他们会进入主屏幕。当用户按下继续时，使用AsyncStorage设置一个键和一个值（键值firstUse，值为false）。

现在，当我回到应用程序时，将再次加载游览页面。当我查看控制台日志时，我注意到checkFirstUse函数在getSettings函数执行完毕之前将值返回为undefined（这些值在之后输出）。我假设getSettings先运行，直到返回一个响应（因为该函数使用async / await）但显然没有任何帮助来解决这个问题。

这是代码（为简单起见而删除）

闪屏：

@inject("settingsStore")
class SplashScreen extends Component {
  constructor(props: Object) {
    super(props);
  }

  componentDidMount() {
    this.props.settingsStore.getSettings();
    this.checkFirstUse();
  }

  checkFirstUse = () => {
    console.log(' is this first use '+this.props.settingsStore.settings.firstUse);
    if (this.props.settingsStore.settings.firstUse === 'false') {
      this.props.navigation.navigate('HomeScreen')
    }else {
      this.props.navigation.navigate('TourScreen')
    }
  }
  render() {
    return (
      <View>
        <Text>This is the SPLASH SCREEN</Text>
      </View>
    );
  }
}
export default SplashScreen;

SettingsStore：

export default class SettingsStore {
  @observable settings = [];

  @action async getSettings() {
    try{
      var response = await AsyncStorage.multiGet(['firstUse', 'userID']);
      this.settings.firstUse = response[0][1];
      this.settings.UserID = response[1][1];
      console.log('got settings'); 
      console.log(response);    
    } catch (error) {
      console.log(error.message);
    }
  }

  @action async setFirstUse() {
    try {
      await AsyncStorage.setItem('firstUse', 'false');
      this.settings.firstUse = 'false';
      console.log('Have set first use');
    } catch (error) {
      console.log(error.message);
    }
  }
}

提前致谢。

Answer 1

所以我在SplashScreen中更新了我的代码：

async componentDidMount() {
  await this.props.settingsStore.getSettings();
  await this.checkFirstUse();
}

这似乎有效我将进一步测试并报告回来。

在使用async / await时，在执行下一个函数之前，React Native AsyncStorage不返回值

1 个答案: