Question

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

2019-11-25

59

javascript reactjs

我正在尝试使用存储在变量 childdata 中的对象数组来更新此类的状态。但是，当我使用 setState（{childdata：childdata）} 时，并通过调用 this.state.childdata 在以后使用它时，它是 undefined ，因此它永远不会用信息更新状态。

465747447

Answer 1

您遇到了几个问题。首先，您确实需要在回调函数中设置状态。但是，这样一来，您将陷入无限循环。这是因为您不应该在 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

Answer 2

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

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

Answer 3

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

同时将回调函数设为箭头函数。

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