javascript - 在React中更新函数中类的状态

我正在尝试使用存储在变量childData中的对象数组更新此类的状态。但是，当我使用setState({childData: childData)}并稍后通过调用this.state.childData使用它时，它就是undefined，因此它永远不会使用该信息更新状态。

class Users extends React.Component {
    state = {
        childData: ""
    }

   retrieve = () => {
       let childData;
       var leadsRef = database.ref('users');
       leadsRef.on('value', function(snapshot) {
           childData = snapshot.val();
           console.log(childData)
           this.setState({
               childData: childData
           })
       });
    }

    componentDidMount() {
        this.retrieve()
    }

    render() {
        return(
            <div>
            <h3>These are all the users in the app</h3>
            {console.log(this.state.childData)}
            </div>
        )
    }
}

export default Users

最佳答案

您遇到了几个问题。首先，您确实确实需要在回调函数中设置状态。但是，按原样，您将遇到无限循环。那是因为您不应该在render方法中执行异步功能。而是使用componentDidMount方法执行此操作，以便仅在安装组件时才触发。

class Users extends React.Component {
    state = {
        childData: ""
    }

   retrieve = () => {
       let childData;
       var leadsRef = database.ref('users');
       leadsRef.on('value', snapshot => {
           childData = snapshot.val();
           console.log(childData)
           this.setState({
               childData: childData
           })
       });
    }

    componentDidMount() {
        this.retrieve()
    }

    render() {
        return(
            <div>
            <h3>These are all the users in the app</h3>
            {console.log(this.state.childData)}
            </div>
        )
    }
}

export default Users