使用 Firebase 数据设置状态后，React 渲染未更新答案

【问题标题】：React render not not updating after setting state with Firebase data使用 Firebase 数据设置状态后，React 渲染未更新
【发布时间】：2018-10-26 19:31:21
【问题描述】：

我正在尝试进入我的 Firebase 数据库并将用户所属的所有组保存到一个数组中，然后将该数组推送到组件状态并相应地渲染一个项目列表，但我的渲染没有显示来自该状态的项目.

componentDidMount(){
    this.setGroups();
}
setGroups(){
    const user = fire.default.auth().currentUser.uid;
    const dbRef = fire.default.database();
    const currentUserRef = dbRef.ref('users').child(user);
    const userGroups = currentUserRef.child('groups');
    const groupsRef = dbRef.ref('groups');
    const idArray = []
    const groupArray = []
    userGroups.on('value', snapshot => {
        snapshot.forEach(groupId => {
            idArray.push(groupId.val().groupId)
        })
        idArray.forEach(function(group, i) {
            groupsRef.child(idArray[i]).on('value', snap =>{
                let addGroup = {
                    id: snap.key,
                    name: snap.val().groupName,
                    description: snap.val().groupDescription,
                };
                groupArray.push(addGroup);
            })
            this.setState({
                hasGroups: true,
                groupsHold: groupArray,
            })
        }.bind(this))
    })
}
render(){
    console.log(this.state.hasGroups)
    if(this.state.hasGroups){
        return(
            <div>
                <ul>
                    {this.state.groupsHold.map((group, i) => 
                        <ListItem button
                        selected={this.state.selectedIndex === group}
                        onClick={event => this.handleListItemClick(event, group, i)}
                        key={`item-${group.id}`}>
                            <ListItemText primary={`${group.name}`} />
                        </ListItem>
                    )}
                </ul>
            </div>
        )
    }
    return(
        <div>
            <p>You have no groups yet</p>
        </div>
    )
}

我通过进入我的 firebase 并从用户节点获取用户所属的所有组然后遍历“组”节点并将用户所属的所有组保存到国家。我期待渲染在新状态下重新加载，但它显示为空白。它没有显示<p>You have no groups yet</p>，因此它识别出该州有组，但只是显示一个空的<ul>。

【问题讨论】：

你的控制台有什么错误吗？

标签： reactjs firebase firebase-realtime-database

【解决方案1】：

对 Firebase 的调用是异步的，但 setGroups 不是您编写的 async 函数。我认为，如果您将setGroups 设为async 函数并在await 中调用userGroups.on('value', () => {})，您的问题将得到解决。

当前，当groupsArray 为空时，您的组件正在设置状态。所以即使this.state.hasGroups 为真，也没有要渲染的组！

【讨论】：