自定义挂钩的返回值不会在其文件之外更新

Question

我的DarkModeToggle.js 文件中有这个自定义钩子：

export const useColorScheme = () => {
  const systemPrefersDark = useMediaQuery({
    query: '(prefers-color-scheme: dark)',
  });

  const [isDarkMode, setIsDarkMode /*,removeThemeState*/] =
    useLocalstorage('isDarkTheme');

  const value = useMemo(
    () =>
      isDarkMode === undefined ||
      isDarkMode === null ||
      (isDarkMode !== undefined &&
        isDarkMode !== null &&
        typeof isDarkMode !== 'boolean')
        ? systemPrefersDark
        : isDarkMode,
    [isDarkMode, systemPrefersDark]
  );

  useEffect(() => {
    console.log(value);
    if (value) {
      document.body.setAttribute('darkTheme', true);
    } else {
      document.body.removeAttribute('darkTheme');
    }
  }, [value]);
  return [value, setIsDarkMode];
};

然后在我使用这个钩子的组件中，我有以下代码：

const [value] = useColorScheme();

  React.useEffect(() => {
    console.log(value);
  }, [value]);

问题在于，在第二个文件中，value 即使在它发生更改时也只记录到控制台一次，而在 useColorScheme 挂钩中的 useEffect 中，它总是在它发生更改时被记录。

Answer 1

看起来您只是从自定义挂钩返回 value 和 setIsDarkMode。

尝试像这样更改您的代码：

export const useColorScheme = () => {
    ...
    return { value, isDarkMode, setIsDarkMode };
};

const { isDarkMode } = useColorScheme();