多个组件状态的反应钩子没有更新

Question

我有一个钩子和 2 个组件。组件App.js有一个函数可以改变hook中的状态，但是组件New.js中的值并没有更新，为什么？我想我错过了一些东西，但无法弄清楚。

App.js

export const useToggle = () => {
  const [onOff, setOnOff] = useState(false);
  return [onOff, () => setOnOff((prev) => !prev)];
};

export default function App() {
  const [onOff, setOnOff] = useToggle();

  return (
    <div className="App">
      <h1>{onOff.toString()}</h1>
      <button onClick={setOnOff}>toggle</button>
    </div>
  );
}

New.js

import { useToggle } from "./App.js";

export default function New() {
  const [onOff] = useToggle();

  return (
    <div className="App">
      <hr />
      <h1>NEW:</h1>
      <pre>{onOff.toString()}</pre>
    </div>
  );
}

https://codesandbox.io/s/musing-fire-rjude?file=/src/App.js

Answer 1

每个useToggle 钩子都是具有自己状态的自己的实体。您在App 中切换的useToggle 与在New 中呈现/使用的useToggle 不同。

这意味着它们的切换独立于任何其他钩子和状态。他们不共享“状态”。

如果你想创建一个具有共享状态的 useToggle 钩子，那么我建议通过 React 上下文和 useContext 钩子来实现它，这样每个 useToggle 钩子都可以切换在上下文。

更新

全局useToggle钩子。

togglecontext.js

import { createContext, useContext, useState } from 'react';

export const ToggleContext = createContext([false, () => {}]);

const ToggleProvider = ({ children }) => {
  const [onOff, setOnOff] = useState(false);
  const toggle = () => setOnOff(t => !t);

  return (
    <ToggleContext.Provider value={[onOff, toggle]}>
      {children}
    </ToggleContext.Provider>
  );
}

export const useToggle = () => useContext(ToggleContext);

export default ToggleProvider;

index - 提供上下文

...
import ToggleProvider from "./toggle.context";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <ToggleProvider>
      <App />
      <New />
    </ToggleProvider>
  </StrictMode>,
  rootElement
);

应用程序

import "./styles.css";
import { useToggle } from "./toggle.context";

export default function App() {
  const [onOff, setOnOff] = useToggle();

  return (
    <div className="App">
      <h1>{onOff.toString()}</h1>
      <button onClick={setOnOff}>toggle</button>
    </div>
  );
}

新的

import { useToggle } from "./toggle.context";

export default function New() {
  const [onOff] = useToggle();

  return (
    <div className="App">
      <hr />
      <h1>NEW:</h1>
      <pre>{onOff.toString()}</pre>
    </div>
  );
}

请注意，App 和 New 组件中唯一发生变化的是导入，其中定义了 useToggle 挂钩。