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

Question

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

应用程序.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>
  );
}

新的.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

标签： javascriptreactjsecmascript-6react-hooks

Answer 1

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

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

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

更新

全局useToggle挂钩。

切换上下文.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请注意， and组件中唯一改变的New是导入，其中useToggle定义了钩子。