Javascript 在React中更新函数内类的状态

我试图用变量

childData

中存储的对象数组更新此类的状态。但是，当我使用

setState（{childData:childData）}

，然后通过调用

this.state.childData

使用它时，它是

未定义的

，因此它从不使用信息更新状态

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

类用户扩展React.Component{
状态={
儿童数据：“
}
检索=（）=>{
让孩子们分享数据；
var leadsRef=database.ref（“用户”）；
leadsRef.on（'value'，函数（快照）{
childData=snapshot.val（）；
console.log（childData）
这是我的国家({
childData:childData
})
});
}
componentDidMount（）{
this.retrieve（）
}
render（）{
返回(
这些是应用程序中的所有用户
{console.log（this.state.childData）}
)
}
}
导出默认用户

尝试在leadsRef.on回调函数中设置状态。例如：

leadsRef.on('value', snapshot => {
    const childData = snapshot.val()
    this.setState({childData})
})

---

你有几个问题。首先，您确实需要在回调函数中设置状态。然而，按原样，您将遇到一个无限循环。这是因为您不应该在

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

类用户扩展React.Component{
状态={
儿童数据：“
}
检索=（）=>{
让孩子们分享数据；
var leadsRef=database.ref（“用户”）；
leadsRef.on（'value'，快照=>{
childData=snapshot.val（）；
console.log（childData）
这是我的国家({
childData:childData
})
});
}
componentDidMount（）{
this.retrieve（）
}
render（）{
返回(
这些是应用程序中的所有用户
{console.log（this.state.childData）}
)
}
}
导出默认用户

在回调中使用this.setState。您正在执行的代码是非阻塞的，因此将在检索childDate之前执行this.setState

还可以使回调函数成为箭头函数

---

这是否有帮助，我不确定它是否正确。

console.log（childData）内部

leadsRef.on（'value'

包含两个用户信息的两个对象的数组。当我注释掉这个.setState（childData:childData）时，这就是我得到的。但是，当我离开这个setState（childData:childData）时，我没有得到更新的状态，也没有得到相同的结果（两个对象的数组超过50次）这个错误消息你有问题的唯一原因是当你使用函数而不是箭头函数时，它的值是不同的。答案是有效的，因为它使用箭头函数，否则你的解决方案是好的。我试过了，当我把它添加到那里时，我得到了这个错误，它给了我这个错误我试过了，值是e在返回语句this.state.childdata中仍然未定义。您看到我将

setState

移动到的位置了吗？对不起，我的答案中有一个额外的

setState

。您能再试一次吗？我在代码中只看到一个setState，它仍然没有work@JoscandyNunez我更新了回调中的arrow函数，以确保

这一点

引用的是组件。如果将其设置为arrow函数，那么它是否工作？它工作了！在componentDidMount（）中也称为此。retrieve（），谢谢！