Question

当用户单击某个组时，我尝试加载属于该组的所有事件，但是当应用启动并单击该组时，最初没有任何更改，直到再次单击该组。

toggleGroup = (name, index, id) => {
    this.setState({
        group: name,
        index: index,
        id: id
    })
    this.setEvents(id);
}
setEvents(id){
    let tempIdHold = [];
    if(id != null){
        const groupRef = fire.database().ref('groups').child(id).child('events');
        groupRef.on('value', snapshot =>{
            if(snapshot.val()){
                snapshot.forEach(snap => {
                    tempIdHold.push(snap.key);
                })
                this.setState({hasEvents: true});
            }else{
                this.setState({hasEvents: false});
            }
        });

        const eventsRef = fire.database().ref('events');
        const tempEventHold = [];

        tempIdHold.forEach(event => {
            eventsRef.child(event).once('value', snapshot => {
                console.log('eventsRef: ' + snapshot.key)
                let newEvent = {
                    name:snapshot.val().name,
                    description:snapshot.val().description,
                    groupid:this.props.group,
                    id: eventsRef.push().key
                };
                tempEventHold.push(newEvent);    
                this.setState({
                    events: tempEventHold
                });                
            }); 
        });
    }
}

这是我在切换组时运行的功能。似乎该状态的事件数组在第一次单击时并未填充。我猜这是因为firebase和setState是异步的。如何确保在事件数组填充后渲染器运行？

Answer 1

可能是因为

 this.setState({
        group: name,
        index: index,
        id: id
    })
    this.setEvents(id);

setState需要花费一些时间来执行，这意味着当您调用setEvents时，对setState的更改将不会完成。

有两种方法可以做到，第一种是使用异步事件，另一种是在this.setEvents(id)回调中传递this.setState

this.setState({
   group: name,
    index: index,
    id: id
}, () => this.setEvents(id));

更新：再次浏览代码时，您没有在代码中的任何地方使用this.state.xyz，而是传递了ID，因此它不会影响您的应用。

您可能需要共享更多代码/或创建一个有效的演示以便我们识别

此外，我以前从未使用过firebase，但是从firebase进行的操作需要一些时间才能完成，最好在代码中使用Promise

为什么在从Firebase加载数据之前需要运行两次此功能？

1 个答案: