Доступ к обновленным значениям состояния дочернего элемента от родителя в реакции

Question

У меня есть один компонент «Checkin», который дополнительно включает дочерний компонент «CheckinGraph». Компонент графика проверки имеет три значения состояния, которые инициализируются значением 0, но в жизненном цикле ComponentDidMount их значения изменяются с 0 на определенные c значения. Я хочу получить доступ к этим переменным состояния из родительского компонента.

Вот мой код, с помощью которого я получаю доступ к этим переменным состояния.

Дочерний компонент

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});

     }
}

Родительский компонент

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>
)
}
}

Теперь проблема в , Я могу получить доступ к значениям от дочерних к родительским, но это исходные значения, а не обновленные значения. Есть идеи, что я делаю не так?

Answer 1

Два подхода:

1) Используйте Redux для управления состоянием, а затем отправьте действие

2) Сделайте вызовы в родительском и передайте как props ant, затем измените props в дочернем компоненте. Хотя мутация - это плохо, но это очень простой способ