Question

我正在componentDidMount中设置阵列的状态，但是不明白为什么它在挂载中显示为空。

constructor(props){
    super(props);
    this.state = {
        currentGroup: this.props.currentGroup,
        eventHold: [],
        idHold: []
    }
}
componentDidMount(){
    const groupRef = firebase.database().ref('groups').child(this.state.currentGroup).child('events');
    var tempIdHold =[];
    groupRef.on('value', snapshot => {
        snapshot.forEach(function(snap)  {
            tempIdHold.push(snap.key)
        })

        this.setState({
            idHold: tempIdHold
        });
        console.log(tempIdHold)
        console.log(this.state.idHold)
    })
    this.loadGroupEvents(this.state.idHold);
}

第一个console.log显示一个填充的tempId数组，但是在它下面的第二个console.log显示一个空的state.id数组。为什么？

Answer 1

this.setState是异步的，它接受一个回调，该回调将在操作完成后调用，尝试将其添加并查看结果

this.setState(
  { idHold: tempIdHold },
  // our updated state will be available in our callback
  () => console.log(this.state.idHold)
);

Answer 2

因为this.setState是一个异步函数。因此，您可以在setState函数中使用回调

this.setState({
 idHold: tempIdHold
}, () => {
 console.log(tempIdHold)
 console.log(this.state.idHold)
});

为什么我最终会得到一个空数组？

2 个答案: