Question

我无法从自定义挂钩获取更新状态。这个例子很简单。这是一个自定义钩子，允许从暗主题切换到亮主题在自定义钩子内，我使用 useMemo 返回一个记忆值，但每次我用 switchOn 更新状态时，这似乎都不会更新。

我不想在这个例子中使用上下文

import { useState, useMemo, useCallback } from "react";

const useTheme = (initial) => {
  const [isOn, turnOn] = useState(false);
  const switchOn = useCallback((e) => turnOn(e.target.checked), [turnOn]);
  return useMemo(() => {
    return {
      theme: isOn ? "light" : "dark",
      buttonTheme: isOn ? "dark" : "light",
      lightsIsOn: isOn ? "On" : "Off",
      isChecked: isOn,
      switchOn,
    };
  }, [switchOn, isOn]);
};
export default useTheme;

import { useState, useRef, useReducer } from "react";
import useTheme from "./useTheme";
import todos from "./reducer";
import "./App.css";

const Item = ({ id, text, done, edit, remove }) => {
  const { buttonTheme } = useTheme();
  const isDone = done ? "done" : "";
  return (
    <div style={{ display: "flex" }}>
      <li className={isDone} key={id} onClick={() => edit(id)}>
        {text}
      </li>
      &nbsp;
      <button type="button" onClick={() => remove(id)} className={buttonTheme}>
        <small>x</small>
      </button>
    </div>
  );
};

const SwitchInput = () => {
  const { switchOn, isChecked, lightsIsOn } = useTheme();
  return (
    <>
      <label class="switch">
        <input type="checkbox" onChange={switchOn} checked={isChecked} />
        <span class="slider round"></span>
      </label>
      &nbsp;
      <span>
        {" "}
        Lights <b>{lightsIsOn}</b>
      </span>
      <br /> <br />
    </>
  );
};

const initialState = {
  items: [],
};
const init = (state) => {
  return {
    ...state,
    items: [
      { id: 1, text: "Learning the hooks", done: false },
      { id: 2, text: "Study JS", done: false },
      { id: 3, text: "Buy conference ticket", done: false },
    ],
  };
};
function App() {
  const inputRef = useRef();
  const [state, dispatch] = useReducer(todos, initialState, init);
  const [inputValue, setInputValue] = useState(null);
  const { theme } = useTheme();

  const handleOnChange = (e) => setInputValue(e.target.value);
  const handleOnSubmit = (e) => {
    e.preventDefault();
    dispatch({ type: "add", payload: inputValue });
    inputRef.current.value = null;
  };

  return (
    <div className={`App ${theme}`}>
      <SwitchInput />
      <form onSubmit={handleOnSubmit}>
        <input ref={inputRef} type="text" onChange={handleOnChange} />
        <ul>
          {state.items.map((item) => (
            <Item
              {...item}
              key={item.id}
              remove={(id) => dispatch({ type: "remove", payload: { id } })}
              edit={(id) => dispatch({ type: "edit", payload: { id } })}
            />
          ))}
        </ul>
      </form>
    </div>
  );
}
export default App;

我的自定义钩子：useTheme.js
下面，我想从自定义钩子访问逻辑的组件：App.js

我使用 App.css 来应用主题样式：深色和浅色

下面是一个演示。我们可以看到值没有改变

订阅状态更改的有效方法是如何在组件之间共享全局状态？

Answer 1

您需要将 useTheme() 的值从 <App> 传递给 <SwitchInput> 才能共享，如下所示。

function App() {
  const { theme, switchOn, isChecked, lightsIsOn } = useTheme();

  return (
    <div className={`App ${theme}`}>
      <SwitchInput
        switchOn={switchOn}
        isChecked={isChecked}
        lightsIsOn={lightsIsOn}
      />
    </div>
  );
}

然后，<SwitchInput> 将在道具中接收它们。

const SwitchInput = ({ switchOn, isChecked, lightsIsOn }) => {
  return (
    <>
      <label class="switch">
        <input type="checkbox" onChange={switchOn} checked={isChecked} />
        <span class="slider round"></span>
      </label>
      &nbsp;
      <span>
        {" "}
        Lights <b>{lightsIsOn}</b>
      </span>
      <br /> <br />
    </>
  );
};

在您的示例中，useTheme() 在 <App> 和 <SwitchInput> 中都被调用，但 theme 和其他值是单独初始化的，并且不会在每个组件之间共享。

自定义钩子中的状态未更新

1 个答案: