在反应中从父级访问子级的更新状态值答案

【问题标题】：Access updated state values of child from parent in react在反应中从父级访问子级的更新状态值
【发布时间】：2020-10-05 15:55:12
【问题描述】：

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

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

子组件

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

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

【问题讨论】：

setState 是异步的，因此componentDidMount 将在状态更新发生之前触发。如果您想从孩子那里获取特定的值，您可以从技术上传递一个回调，孩子调用该回调将在父节点上运行。但是为什么你首先需要这样做呢？我敢打赌，有一种更好的方法/实现来处理你正在尝试做的事情，而无需骇客
你应该把你所有的状态移动到父组件中开始
不是从子级调用 API，而是从父级调用，这样您就不必从父级访问子级的数据。或者在 Parent 中创建一个方法并将其作为 Props 传递，并在数据从后端到达后使用 child 的该方法设置数据
这真的取决于当前系统是什么，如果有100个孩子，也许孩子设置数据更有意义。但是你可以在这里使用上下文而不是传递状态和回调，这可能是更好的实现。我认为 OP 应该更多地帮助解释当前的设置，以便我们知道发生了什么。
为什么不能做状态提升？

标签： reactjs typescript react-state-management react-lifecycle

【解决方案1】：

两种方法：

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

【讨论】：

或在这里使用反应上下文，这样你就不必在不需要时拉入一个全新的包。