Javascript react native firebase async wait parallel with promise.all 从“../config/fire”导入火； const db=fire.firestore（）； 类InitialDb扩展组件{ 建造师（道具）{ 超级（道具）； 此.state={ 学校：''， 学生们：“， }; } 异步组件didmount（）{ const{size:schools}=wait db.collection（'schools'）.get（）； const{size:students}=wait db.collection（'students'）.get（）； 这个州（{学校，学生}）； } render（）{ 返回( {/* */} 学校：{这个州。学校} 学生：{this.state.Students} 办公室：50 出席人数：50 {/* 从左向右滑动菜单 */} 搜寻 分部 地区 帮派 搜寻 {/* */} ); } } const styles=StyleSheet.create({ 基本风格：{ //弹性：1， 背景颜色：“#fff”， 对齐项目：“居中”， 为内容辩护：“中心”， flexDirection:'行'， }, 宽度样式：{ 宽度：尺寸。获取（'窗口'）。宽度/2， }, 地图样式：{ 位置：'绝对'， 排名：3， 左:0,， 右:0,， 底部：0， }, }); 导出默认的InitialDb；
**上面的代码是同步工作的，也是以串联方式工作的。我希望这是在异步和等待，因为这是冻结的用户界面。而且它还应该在使用promise.all获得所有这2个firestore集合的大小后更新所有2个状态对象。 这里我已经更新了代码，请再次检查**问题 这里的问题基本上是firebase在每次Javascript react native firebase async wait parallel with promise.all 从“../config/fire”导入火； const db=fire.firestore（）； 类InitialDb扩展组件{ 建造师（道具）{ 超级（道具）； 此.state={ 学校：''， 学生们：“， }; } 异步组件didmount（）{ const{size:schools}=wait db.collection（'schools'）.get（）； const{size:students}=wait db.collection（'students'）.get（）； 这个州（{学校，学生}）； } render（）{ 返回( {/* */} 学校：{这个州。学校} 学生：{this.state.Students} 办公室：50 出席人数：50 {/* 从左向右滑动菜单 */} 搜寻 分部 地区 帮派 搜寻 {/* */} ); } } const styles=StyleSheet.create({ 基本风格：{ //弹性：1， 背景颜色：“#fff”， 对齐项目：“居中”， 为内容辩护：“中心”， flexDirection:'行'， }, 宽度样式：{ 宽度：尺寸。获取（'窗口'）。宽度/2， }, 地图样式：{ 位置：'绝对'， 排名：3， 左:0,， 右:0,， 底部：0， }, }); 导出默认的InitialDb；,javascript,reactjs,react-native,async-await,es6-promise,Javascript,Reactjs,React Native,Async Await,Es6 Promise,**上面的代码是同步工作的，也是以串联方式工作的。我希望这是在异步和等待，因为这是冻结的用户界面。而且它还应该在使用promise.all获得所有这2个firestore集合的大小后更新所有2个状态对象。 这里我已经更新了代码，请再次检查**问题 这里的问题基本上是firebase在每次热模块重新加载时都在初始化。每个应用程序只需初始化一次 因此，基本上，您可以使用try catch包装firebase初始化，并接受错误 import fire from '../config/fire'; co
热模块try catchimport 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;
亲爱的先生，但我需要这些藏品的大小，正如我在我的函数中解释的那样，它是什么，不是吗？你试过上面的代码了吗？我知道了尺寸，先生，但它仍然冻结了UIC。你能发布你的整个组件代码吗？它应该会起作用。看起来你在无限渲染，我觉得不错。你能做点点心吗？异步函数不会阻塞UI。我认为您的
异步函数没有问题。
try {
firebase.initializeApp({
/** config here **/
});
} catch(err) {
console.log(err);
}