如果我使用等待，React-Native 应用程序将不起作用答案

【问题标题】：React-Native app doesn't work if i use await如果我使用等待，React-Native 应用程序将不起作用
【发布时间】：2018-12-06 11:01:20
【问题描述】：

这是我第一次使用 react-native 开发 Android 应用。当我从firestore 检索一些数据时，我尝试使用 async/await，但是当我添加单词 await 时，应用程序崩溃并且不再启动。正如您在我的 package.json 文件中看到的那样，我使用 react-native-firebase 库。 这是我的组件中不起作用的部分：

componentDidMount() {
  this.getAccountFromFirestore(this.props.user);
}

getAccountFromFirestore = async user => {
  const accounts = await firebase
   .firestore()
   .collection('accounts')
   .get();

  this.setState({ loading: false }); 
};

这是我的 package.json，如果有用的话

{
  "name": "myapp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "ios": "react-native run-ios",
    "android": "react-native run-android"
  },
  "dependencies": {
    "native-base": "^2.8.1",
    "react": "16.6.1",
    "react-native": "0.57.6",
    "react-native-firebase": "^5.1.1",
    "react-native-navigation": "^1.1.493",
    "react-native-vector-icons": "^6.1.0",
    "react-redux": "^5.1.1",
    "redux": "^4.0.1"
  },
  "devDependencies": {
    "babel-jest": "23.6.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.49.2",
    "react-test-renderer": "16.6.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

【问题讨论】：

尝试使用 .then() 承诺
如果您不介意，请在此处与我们分享您的错误消息（最好是堆栈跟踪）。

标签： javascript react-native google-cloud-firestore

【解决方案1】：

你可以用 Promise 来实现：

 firebase
 .firestore()
 .collection('accounts')
  .get()
  .then(accounts => {
   console.log ('Use accounts variable as per your requirement,'accounts)
  })
  .catch(error => {console.error(error)})

【讨论】：

【解决方案2】：

我不知道是你的 React Native 还是你使用的是 Node 6。但据我所知，async/await仅在 Node 8 或更高版本上受支持。所以，你最好的选择仍然是使用 Promises 来解决这个问题。例如：

componentDidMount() {
  this.getAccountFromFirestore(this.props.user);
}

getAccountFromFirestore = user => {
  firebase
    .firestore()
    .collection('accounts')
    .get()
    .then(accounts => {
      let data = accounts.docs.map(account => account.data());
      console.log(data);

      this.setState({ loading: false });
    })
    .catch(err => console.log(err));
};

同样在使用async/await 时，不要忘记try-catch 块：

componentDidMount() {
  this.getAccountFromFirestore(this.props.user);
}

getAccountFromFirestore = async user => {
  try {
    const accounts = await firebase
      .firestore()
      .collection('accounts')
      .get();

    const data = accounts.docs.map(a => a.data());
    console.log(data);

    this.setState({ loading: false });
  } catch (err) {
    console.error(err);
  }
};

【讨论】：

【解决方案3】：

选项 a) 继续使用 Promise 选项 b) 迁移该 RN，如果您可以使用 async/await，您的代码可能太旧而无法进入商店。选项 c) Babel...

【讨论】：