React自定义Hook在多组件间调用时状态未同步更新是什么原因？

每调用一次自定义Hook，都会在调用它的组件实例上创建完全独立的状态副本，状态之间互不关联。你在App组件和New组件中分别调用了useToggle，本质上生成了两个独立的onOff状态，修改其中一个自然不会影响另一个。

方案1：状态提升 #

将共享状态提到两个组件的公共父组件中，通过props传递状态和修改方法：

// 父组件Parent.js
import { useState } from 'react'
import App from './App'
import New from './New'

export default function Parent() {
  const [onOff, setOnOff] = useState(false)
  const toggle = () => setOnOff(prev => !prev)
  return (
    <>
      <App onOff={onOff} toggle={toggle} />
      <New onOff={onOff} />
    </>
  )
}

// 修改后的App.js
export default function App({ onOff, toggle }) {
  return (
    <div className="App">
      <h1>{onOff.toString()}</h1>
      <button onClick={toggle}>toggle</button>
    </div>
  )
}

// 修改后的New.js
export default function New({ onOff }) {
  return (
    <div className="App">
      <hr />
      <h1>NEW:</h1>
      <pre>{onOff.toString()}</pre>
    </div>
  )
}

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

适合需要跨多层组件共享状态的场景：

// ToggleContext.js
import { createContext, useContext, useState } from 'react'

const ToggleContext = createContext()

export function ToggleProvider({ children }) {
  const [onOff, setOnOff] = useState(false)
  const toggle = () => setOnOff(prev => !prev)
  return (
    <ToggleContext.Provider value={{ onOff, toggle }}>
      {children}
    </ToggleContext.Provider>
  )
}

export function useToggle() {
  return useContext(ToggleContext)
}

// 根组件入口
import { ToggleProvider } from './ToggleContext'
import App from './App'
import New from './New'

function Root() {
  return (
    <ToggleProvider>
      <App />
      <New />
    </ToggleProvider>
  )
}

// 修改后的App.js
import { useToggle } from './ToggleContext'

export default function App() {
  const { onOff, toggle } = useToggle()
  return (
    <div className="App">
      <h1>{onOff.toString()}</h1>
      <button onClick={toggle}>toggle</button>
    </div>
  )
}

// 修改后的New.js
import { useToggle } from './ToggleContext'

export default function New() {
  const { onOff } = useToggle()
  return (
    <div className="App">
      <hr />
      <h1>NEW:</h1>
      <pre>{onOff.toString()}</pre>
    </div>
  )
}

方案3：使用全局状态管理库 #

如果项目中已经在使用Zustand、Redux等全局状态管理工具，也可以直接将共享状态存放在全局store中，所有组件都从store读取状态、触发修改即可。

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