Приложение React-Native не работает, если я использую await - PullRequest
0 голосов
/ 06 декабря 2018

Это первый раз, когда я использую реагирующий натив для разработки приложения для Android.Я пытаюсь использовать async / await, когда извлекаю данные из firestore, но когда я добавляю слово await, приложение вылетает и больше не запускается.Я использую библиотеку react-native-firebase, как вы можете видеть в моем файле package.json. Это часть моего компонента, которая не работает:

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"
  }
}

Ответы [ 2 ]

0 голосов
/ 06 декабря 2018

Я не знаю, ваш ли это React Native или вы используете Node 6 .Но насколько я знаю, async/await поддерживается только на узле 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);
  }
};
0 голосов
/ 06 декабря 2018

Вы можете реализовать с Promise как:

 firebase
 .firestore()
 .collection('accounts')
  .get()
  .then(accounts => {
   console.log ('Use accounts variable as per your requirement,'accounts)
  })
  .catch(error => {console.error(error)})
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...