在 React 中从 parent 访问 child 的更新状态值

Question

我有一个组件 'Checkin'，它还包括 child 个组件 'CheckinGraph'。签入图组件具有三个状态值，它们初始化为 0，但在 ComponentDidMount 生命周期中，它们的值从 0 变为特定值。我想从 parent 组件访问这些状态变量。

这是我用来访问这些状态变量的代码。

Child 组件

class CheckinGraph extends React.PureComponent{
    constructor(props)
    {
        super(props)
        this.state={
         totalMaleCount:0,
         totalFemaleCount:0,
         totalUnspecifiedCount:0
      }
    }

//Callback function for parent

getCount=()=>
    {
        let { totalMaleCount, totalFemaleCount, totalUnspecifiedCount}=this.state;
        let arr=[totalCount,totalMaleCount,totalFemaleCount, totalUnspecifiedCount];
        return arr;
    }
   componentDidMount()
    {
     this.setState({totalMaleCount:res.data.maleListCount}); //data is coming from API
     this.setState({totalFemaleCount:res.data.femaleListCount});
     this.setState({totalUnspecifiedCount:res.data.notSpecified});

     }
}

Parent 分量


class CheckIn extends React.Component{
    constructor(props)
    {
     this.state={}
     this.graph=React.createRef();
    }

 componentDidMount()
    {
        let total=this.graph.current.getCount();
        console.log(total);

    }
render()
{
return(
<div>
<CheckinGraph ref={this.graph} />
</div>
)
}
}

现在的问题是，我可以访问从 child 到 parent 的值，但它是初始值，而不是更新后的值。知道我做错了什么吗？

Answer 1

两种方法：

使用 Redux 管理状态，然后从 CChild Component 调度一个动作
将 onChange 函数传递给子组件，并在值更新时从子组件调用该函数。 onChange 函数是您可以访问更新值的地方，然后您可以在 Parent 中做任何您想做的事情。

在 React 中从 parent 访问 child 的更新状态值

Access updated state values of child from parent in react

reactjs

typescript

react-state-management

react-lifecycle