用 promise.all 反应原生 firebase 异步等待并行答案

【问题标题】：react native firebase async await parellel with promise.all用 promise.all 反应原生 firebase 异步等待并行
【发布时间】：2020-12-26 10:48:29
【问题描述】：

import fire from '../config/fire';
const db = fire.firestore();
class InitialDb extends Component {
  constructor(props) {
    super(props);
    this.state = {
      schools: '',
      students: '',
    };
  }
  async componentDidMount() {
    const { size: schools } = await db.collection('schools').get();
    const { size: students } = await db.collection('students').get();

    this.setState({ schools, students});
  }
  render() {
    return (
      <SafeAreaView>
        {/* <StatusBar translucent backgroundColor='#1b75ce' />
        <HC title='Dashboard' /> */}
        <BackButton />
        <View style={{ paddingTop: 10, marginBottom: 20 }}>
          <View style={{ flexDirection: 'row' }}>
            <View style={styles.widthstyle}>
              <TouchableOpacity>
                
                  <Card>
                    <CardItem>
                      <Body>
                        <View style={{ flexDirection: 'row' }}>
                          <Image
                            style={{ width: 30, height: 30 }}
                            source={require('../assets/schools.png')}
                          />
                          <Text style={{ textAlign: 'center' }}>
                            Schools:{this.state.schools}
                          </Text>
                        </View>
                      </Body>
                    </CardItem>
                  </Card>
                
              </TouchableOpacity>
            </View>
            <View style={styles.widthstyle}>
              <TouchableOpacity>
                
                  <Card>
                    <CardItem>
                      <Body>
                        <View style={{ flexDirection: 'row' }}>
                          <Image
                            style={{ width: 30, height: 30 }}
                            source={require('../assets/asd.png')}
                          />
                          <Text style={{ textAlign: 'center' }}>
                            Students:{this.state.students}
                          </Text>
                        </View>
                      </Body>
                    </CardItem>
                  </Card>
                
              </TouchableOpacity>
            </View>
          </View>
          <View
            style={{ flexDirection: 'row' }}
            //   style={styles.basic1Style}
          >
            <View style={styles.widthstyle}>
              <TouchableOpacity>
                <Card>
                  <CardItem>
                    <Body>
                      <View style={{ flexDirection: 'row' }}>
                        <Image
                          style={{ width: 30, height: 30 }}
                          source={require('../assets/def.png')}
                        />
                        <Text style={{ textAlign: 'center' }}>
                          Office:50
                        </Text>
                      </View>
                    </Body>
                  </CardItem>
                </Card>
              </TouchableOpacity>
            </View>
            <View style={styles.widthstyle}>
              <TouchableOpacity>
                <Card>
                  <CardItem>
                    <Body>
                      <View style={{ flexDirection: 'row' }}>
                        <Image
                          style={{ width: 30, height: 30 }}
                          source={require('../assets/abc.png')}
                        />
                        <Text style={{ textAlign: 'center' }}>Attended:50</Text>
                      </View>
                    </Body>
                  </CardItem>
                </Card>
              </TouchableOpacity>
            </View>
          </View>
        </View>
        {/* <Text style={{ textAlign: "center" }}>
            Swipe from left to right for menu
          </Text> */}
        <View style={{ marginBottom: 2 }}>
          <Text style={{ textAlign: 'center', fontSize: 20, marginBottom: 5 }}>
            Search
          </Text>
        </View>
        <Form style={{ marginLeft: 20 }}>
          <View style={{ flexDirection: 'row' }}>
            <Item style={{ paddingLeft: 20, width: '40%' }}>
              <Label style={{ textAlign: 'left' }}>Division</Label>
              <Input />
            </Item>
            <Item style={{ paddingLeft: 20, width: '40%' }}>
              <Label style={{ textAlign: 'left' }}>Area</Label>
              <Input />
            </Item>
          </View>
          <View style={{ flexDirection: 'row', paddingTop: 20 }}>
            <Item style={{ paddingLeft: 20, width: '40%' }}>
              <Label style={{ textAlign: 'left' }}>Gang</Label>
              <Input />
            </Item>
            <Item
              style={{
                borderBottomColor: 'white',
              }}
            >
              <Button info style={{ marginLeft: 25 }}>
                <Text> Search </Text>
              </Button>
            </Item>
          </View>
        </Form>

        {/*<View style={{ flex: 1, marginTop: 3, left: 0, right: 0, bottom: 0 }}>
            <MapView
              initialRegion={{
                latitude: 12.93092,
                longitude: 77.602156,
                latitudeDelta: 0.0922,
                longitudeDelta: 0.0421,
              }}
              style={styles.mapStyle}
            ></MapView>
          </View>
         */}
      </SafeAreaView>
    );
  }
}
const styles = StyleSheet.create({
  basic1Style: {
    // flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row',
  },
  widthstyle: {
    width: Dimensions.get('window').width / 2,
  },
  mapStyle: {
    position: 'absolute',
    top: 3,
    left: 0,
    right: 0,
    bottom: 0,
  },
});

export default InitialDb;

**上面的代码是同步工作的，也是串行工作的。我希望它处于异步状态并等待，因为这会冻结 UI。它还应该在使用 promise.all 获取所有这 2 个 Firestore 集合的大小后更新所有 2 个状态对象。这里我更新了代码请再检查一遍**

【问题讨论】：

标签： javascript reactjs react-native async-await es6-promise

【解决方案1】：

问题

这里的问题基本上是您的 firebase 在每次 hot-module 重新加载时都会进行初始化。每个 App 只需要初始化一次。

所以基本上，您可以使用 try-catch 包装您的 firebase 初始化并吞下错误。

try {
  firebase.initializeApp({
    /** config here **/
  });
} catch(err) {
  console.log(err);
}

【讨论】：

尊敬的先生，但我需要这些集合的大小，正如我在我的函数中所解释的那样
就是这样，不是吗？上面的代码你试过了吗？
我得到了尺寸，先生，但它仍然冻结 UI
你能发布你的整个组件代码吗？它应该工作。好像你在无限渲染。
我觉得不错。你能创造一个小吃here吗？异步函数不会阻塞 UI。我认为您的 asynchronous function 没有问题。