React中useIsDirty Hook跨组件状态更新失效问题求助

你在CustomCodeEditor和EditorFooter组件中分别调用useIsDirty Hook，导致两个组件的isDirty状态完全独立——CustomCodeEditor里调用setIsDirty(true)只会更新自身的状态，而EditorFooter里调用setIsDirty(false)修改的是另一个独立的状态实例，自然无法同步。

原因分析 #

自定义Hook的核心特性是：每个组件调用Hook时，都会创建独立的状态和副作用。也就是说，CustomCodeEditor和EditorFooter各自调用useIsDirty，会生成两个互不相干的isDirty状态，修改其中一个不会影响另一个。

解决方案 #

方案1：状态提升到共同父组件 #

将useIsDirty的调用移到两个组件的共同父组件中，通过props把状态和更新函数传递给子组件，确保两者共享同一状态实例。

1. 创建父组件EditorContainer：

import CustomCodeEditor from './CustomCodeEditor';
import EditorFooter from './EditorFooter';
import useIsDirty from '../../hooks/useIsDirty';

const EditorContainer = () => {
  const { isDirty, setIsDirty } = useIsDirty();

  return (
    <div>
      <CustomCodeEditor isDirty={isDirty} setIsDirty={setIsDirty} />
      <EditorFooter setIsDirty={setIsDirty} />
    </div>
  );
};

export default EditorContainer;

2. 修改CustomCodeEditor，通过props接收状态和更新函数：

import Editor from "@monaco-editor/react"

const CustomCodeEditor = ({ isDirty, setIsDirty }) => {
  console.log("isDirty:", isDirty)
  return (
    <div className="bg-[#1e1e1e] h-full">
      <Editor
        onChange={(value) => {
          updateCode(value || "")
          setIsDirty(true)
        }}
      />
    </div>
  )
}

export default CustomCodeEditor

3. 修改EditorFooter，通过props接收更新函数：

import Button from "../reusable/Button"

const EditorFooter = ({ setIsDirty }) => {
  const handleSave = async () => {
    setIsDirty(false)
  }

  return (
    <div>
      <Button onClick={handleSave}>Save</Button>
      <Button onClick={handleSave}>Submit</Button>
    </div>
  )
}

export default EditorFooter

方案2：使用React Context共享状态 #

如果组件层级较深，或者后续有更多组件需要访问isDirty状态，使用Context更合适。

1. 创建IsDirtyContext：

import { createContext, useContext } from 'react';
import useIsDirty from '../../hooks/useIsDirty';

const IsDirtyContext = createContext();

export const IsDirtyProvider = ({ children }) => {
  const isDirtyState = useIsDirty();
  return (
    <IsDirtyContext.Provider value={isDirtyState}>
      {children}
    </IsDirtyContext.Provider>
  );
};

export const useIsDirtyContext = () => useContext(IsDirtyContext);

2. 在根组件或父组件中包裹Provider：

import { IsDirtyProvider } from './IsDirtyContext';
import CustomCodeEditor from './CustomCodeEditor';
import EditorFooter from './EditorFooter';

const App = () => {
  return (
    <IsDirtyProvider>
      <CustomCodeEditor />
      <EditorFooter />
    </IsDirtyProvider>
  );
};

3. 修改CustomCodeEditor使用Context：

import Editor from "@monaco-editor/react"
import { useIsDirtyContext } from './IsDirtyContext';

const CustomCodeEditor = () => {
  const { isDirty, setIsDirty } = useIsDirtyContext();

  console.log("isDirty:", isDirty)
  return (
    <div className="bg-[#1e1e1e] h-full">
      <Editor
        onChange={(value) => {
          updateCode(value || "")
          setIsDirty(true)
        }}
      />
    </div>
  )
}

export default CustomCodeEditor

4. 修改EditorFooter使用Context：

import Button from "../reusable/Button"
import { useIsDirtyContext } from './IsDirtyContext';

const EditorFooter = () => {
  const { setIsDirty } = useIsDirtyContext();

  const handleSave = async () => {
    setIsDirty(false)
  }

  return (
    <div>
      <Button onClick={handleSave}>Save</Button>
      <Button onClick={handleSave}>Submit</Button>
    </div>
  )
}

export default EditorFooter

总结 #

• 状态提升适合组件层级较浅、共享状态的组件不多的场景，实现简单直接。
• Context适合组件层级深、多个组件需要共享状态的场景，避免props层层传递的麻烦。

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