Javascript 在react native中呈现数据之前执行异步调用

我的Asyc调用在数据呈现后运行我尝试在构造函数甚至componentDidMount内部运行Asyc调用，但没有任何效果

我的数据库结构..

我在jsx文件中的查询

for(var i = 1; i <= 6; i++) {
    Firebase.database().ref('/' + i).on('value', function(snapshot) {
        value[i] = snapshot.val().state;
    });
}
console.log(value);

---

如果您需要更多详细信息，请告诉我。

您可以通过设置状态来简化并解决此问题

async componentDidMount () {
const imageUrl = await yourAsyncProcess()
this.setState({imageUrl: imageUrl})
}

并使用更新的状态渲染它

<View style={styles.container}>
  <View style={styles.parent}>
    <TouchableOpacity style={styles.child} id='1' onPress={(event) => this.getState(event, '1')} activeOpacity={1}>
      <Image style={styles.img} source={uri: {this.state.imageUrl}} /> // This line is not outputting any image because the array is empty
      <Text style={styles.title}>LED 1</Text>
    </TouchableOpacity>
</View>

this.getState（事件'1'）}activeOpacity={1}>
//此行没有输出任何图像，因为数组为空
发光二极管1

我想跟踪6个组件检查问题中的注释编写一个子组件，该子组件具有通过状态更新图像源的功能。为此设置ref。异步完成后，调用此更新函数来更新子图像数据是否有任何方法可以在加载数据之前不渲染任何内容？我认为这不是一个好主意，因为这样做本质上必须是锁定JS线程。您知道，react本机应用程序只有一个JS线程。如果（您的异步尚未就绪），您可以通过在render if中返回null来“不渲染任何内容”

async componentDidMount () {
const imageUrl = await yourAsyncProcess()
this.setState({imageUrl: imageUrl})
}

<View style={styles.container}>
  <View style={styles.parent}>
    <TouchableOpacity style={styles.child} id='1' onPress={(event) => this.getState(event, '1')} activeOpacity={1}>
      <Image style={styles.img} source={uri: {this.state.imageUrl}} /> // This line is not outputting any image because the array is empty
      <Text style={styles.title}>LED 1</Text>
    </TouchableOpacity>
</View>