React子组件状态更新时如何保证跨层级祖先组件状态同步一致

搭建的React应用组件层级结构如下：

<GrandParentComponent>
    <ParentComponent>
        <ChildComponent>
        </ChildComponent>
    </ParentComponent>
</GrandParentComponent>

子组件内部创建了Context供所有内部组件共享使用，经useCallback()包裹的ref从<ParentComponent>传递到<ChildComponent>，用于追踪从<GrandparentComponent>下发的状态。

各组件原始代码 #

GrandParent 组件 #

const [isPlaying, setIsPlaying] = useState(false);

return (
    <>
        { isPlaying ? "True" : "False" } 
        <ParentComponent {...{isPlaying, setIsPlaying}}/>
    </>
);

Parent 组件 #

const [button, setButton] = useState();

const handleRef = useCallback( current => {
    if(current) {
        setButton(current.button);
    }
}, []);

useEffect(() => {
    if(button) {
        const callback = ({type}) => setIsPlaying(type === "play");
        button.addEventListener("play", callback);
        return () => {
            button.removeEventListener("play", callback);
        };
    }
}, [button]);

return (
    <>
        { isPlaying ? "True" : "False" } 
    <ChildRoot>
        <Child ref={handleRef}/>
    </ChildRoot>
    </>
); 

Child 相关组件 #

const export ChildRoot = ({children}) => {
    return (
        <ChildContext.Provider value={{
            isOpen: true,
            setIsOpen: () => {}
            }}
        />
            {children}
        </ChildContext.Provider>
    );
};


const export Child = ({}, forwardRef) => {
    const ref = useRef();
    
    useImperativeHandle(forwardRef, () => ({
        get button() {
           return ref.current();
        }
    })
});

异常现象 #

isPlaying状态值仅在<ParentComponent>中能正确更新展示，无法同步到<GrandParentComponent>，尝试useContext()方案也未能解决，需要实现全链路组件状态一致性。

状态无法同步的核心原因是代码存在多处语法和逻辑错误，逐一修复即可：

1. Parent组件未接收传入的props
   原始代码中Parent组件没有声明接收props参数，内部调用的setIsPlaying根本不是GrandParent组件传入的状态更新方法，严格模式下会直接抛出未定义错误，自然无法触发GrandParent的状态更新。需要在组件参数中显式解构出isPlaying和setIsPlaying。
2. Child组件的forwardRef用法完全错误
   forwardRef是高阶组件，需要把整个组件作为参数传入包裹，不能直接作为组件的第二个形参使用。同时useImperativeHandle缺少依赖数组，暴露的button属性错误调用了ref.current()——ref.current是DOM节点本身，不是函数，加括号执行会直接报错。且原始Child组件没有返回任何JSX内容，ref无法绑定到真实DOM节点。
3. ChildRoot的Context Provider写法错误
   原始代码中Provider写成了自闭合标签，后续的{children}完全没有被Provider包裹，内部子组件根本无法获取Context值。
4. 基础语法错误
   包括const export的错误导出写法、Parent组件返回的JSX同级元素缺少根节点包裹、useEffect依赖项缺失等，都会导致组件运行异常。

修复后完整代码 #

GrandParent 组件 #

export const GrandParentComponent = () => {
  const [isPlaying, setIsPlaying] = useState(false);

  return (
    <>
      {isPlaying ? "True" : "False"}
      <ParentComponent isPlaying={isPlaying} setIsPlaying={setIsPlaying} />
    </>
  );
};

Parent 组件 #

// 显式接收父组件传入的状态和更新方法
export const ParentComponent = ({ isPlaying, setIsPlaying }) => {
  const [button, setButton] = useState();

  const handleRef = useCallback((current) => {
    if (current) {
      setButton(current.button);
    }
  }, []);

  useEffect(() => {
    if (button) {
      const callback = ({ type }) => setIsPlaying(type === "play");
      button.addEventListener("play", callback);
      return () => {
        button.removeEventListener("play", callback);
      };
    }
  }, [button, setIsPlaying]);

  return (
    <>
      {isPlaying ? "True" : "False"}
      <ChildRoot>
        <Child ref={handleRef} />
      </ChildRoot>
    </>
  );
};

Child 相关组件 #

// 修正Context Provider包裹逻辑，修正导出语法
export const ChildRoot = ({ children }) => {
  return (
    <ChildContext.Provider
      value={{
        isOpen: true,
        setIsOpen: () => {},
      }}
    >
      {children}
    </ChildContext.Provider>
  );
};

// 用forwardRef包裹组件，修正ref暴露逻辑，返回真实DOM节点
export const Child = forwardRef((props, ref) => {
  const buttonRef = useRef();

  useImperativeHandle(
    ref,
    () => ({
      get button() {
        return buttonRef.current;
      },
    }),
    []
  );

  return <button ref={buttonRef}>播放按钮</button>;
});

修复后，Child组件中按钮触发play事件时，调用的就是GrandParent组件传入的setIsPlaying方法，状态会从GrandParent正常下发到所有子组件，实现全链路状态一致。

内容的提问来源于stack exchange，提问作者Kshitij Bantupalli