当一个事件发生在父组件中时,如何从子组件更新父组件的状态?



只有在父组件中发生click事件时,我才能从子功能组件中更新父类组件的状态。现在我可以访问从子组件到父组件的数据,但当我更新状态时,我得到错误,最大深度到达。因此,我认为只有在父组件中发生特定事件时才能从子组件更新父组件的状态,但我找不到任何方法。你能给我点光吗?

从您的描述中,最好的做法是将状态从子进程提升到父进程,以便当前仅在子进程中拥有的信息在父进程中可用(父进程可以将其作为道具提供给子进程)。然后,子进程完全不参与其中,父进程中的事件更新父进程的状态,这是标准的。

但如果你绝对不能这样做:

这会让你偏离常规,但你可以:

  1. 让父级传递给子级两个东西:
    1. 一种从父进程
    2. 订阅事件的方法
    3. 更新父进程状态的函数
  2. 让子节点订阅事件
  3. 让父进程在点击发生时引发子进程订阅的事件
  4. 让子进程通过调用上面(1)(2)的函数来响应该事件

虽然可以工作,但它有点复杂。所以,如果可以避免的话,将更新所需的状态从子进程移到父进程,并将整个更新保存在父进程中。

我终于想到了一个办法。

步骤1:使用useState钩子为发生在父状态的事件设置一个布尔值。

// Inside Parent component
const [eventInParent, setEventInParent] = React.useState(false);

步骤2:将eventInParent作为prop传递给子组件

//子组件内部

步骤3:在props的子组件中接收事件状态(eventInParent),并将其用作useEffect钩子

的依赖项
React.useEffect(() => {
if(eventInParent) {

}

}, [eventInParent]);

正如你所看到的,每次事件在父组件中发生时,eventInParent的值就会改变,这将触发子组件中的useEffect钩子。