Question

我试图进入我的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>。

Answer 1

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

当前，当groupsArray为空时，组件处于设置状态。因此，即使this.state.hasGroups是正确的，也没有要渲染的组！

使用Firebase数据设置状态后，React渲染不会更新

1 个答案: