gpt4 book ai didi

javascript - 在 React Native 中渲染数据之前进行异步调用

转载 作者:行者123 更新时间:2023-12-03 02:23:46 25 4
gpt4 key购买 nike

我的 Asyc 调用在数据渲染后运行,我尝试在构造函数内甚至在 componentDidMount 内运行我的 Asyc 调用,但没有任何效果。

我的数据库结构..

Firebase Real time database

我在 jsx 文件中的查询

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

问题是我想根据我的 React Native 应用程序内数据库中的数据加载图像。

<View style={styles.container}>
<View style={styles.parent}>
// This is only one child
<TouchableOpacity style={styles.child} id='1' onPress={(event) => this.getState(event, '1')} activeOpacity={1}>
<Image style={styles.img} source={value[1]} /> // This line is not outputting any image because the array is empty
<Text style={styles.title}>LED 1</Text>
</TouchableOpacity>
// I have 6 child and want to keep the states separate for all
</View>

获取状态函数

getState (event, BtnId) {
value[BtnId] = this.state.mode_1 ? require('./img/on.png') : require('./img/off.png')
Firebase.database().ref(BtnId).update({
'state': value[BtnId]
});
}

如果您想了解更多详细信息,请告诉我。

最佳答案

您可以通过 setState 简化解决此问题。

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>

关于javascript - 在 React Native 中渲染数据之前进行异步调用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49046827/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com