當我更新context.provider的值時，子組件不會改變顏色

我在我的網站中實作多個顏色主題時遇到了一些麻煩。我制作了一個連接到狀態切換的按鈕，每次狀態切換時，useEffect 處理程式都會將我的 context.provider 的值設定為暗/亮主題。當我記錄 useEffect 處理程式時，它會更改主題，但是子組件不受它的影響。

這是我的 App.tsx：

import {
  useContext,
  useState,
  Provider,
  createContext,
  useEffect,
} from "react";
import logo from "./logo.svg";
import "./App.scss";
import Nav from "./components/ui/nav/Nav";
import Welcome from "./components/ui/welcome/Welcome";
import Section from "./components/ux/section/Section";
import Prices from "./components/ui/prices/Prices";
import { themes, ThemeContext } from "./components/theme/theme";
import Background from "./components/ui/background/Background";

function App() {
  const theme = useContext(ThemeContext);
  const [darkmode, setdarkmode] = useState(true);
  const themeMode = themes.light;
  useEffect(() => {
    const themeMode = darkmode ? themes.light : themes.dark;
    console.log(themeMode);
  }, [darkmode]);

  document.body.style.background = theme.primary;
  document.body.style.color = theme.text;
  return (
    <ThemeContext.Provider value={themeMode}>
      <button
        onClick={() => {
          setdarkmode(!darkmode);
        }}
      >
        hello
      </button>
      <Background />

      <Section content={<Welcome />} />
      <Section content={<Prices />} />
    </ThemeContext.Provider>
  );
}

export default App;

這是我應該使用更新主題的組件之一：

import React, { useContext, useState } from "react";
import "./button.scss";
import { themes, ThemeContext } from "../../theme/theme";
export default function Button(props: {
  invert: boolean;
  link: string | URL;
  content: string;
}) {
  var style = {};

  const theme = useContext(ThemeContext);
  const buttonStyle = {
    color: theme.primary,
    background: theme.cta,
    border: "solid 2px "   theme.cta,
  };
  const invertStyle = {
    color: theme.cta,
    background: theme.primary,
    border: "solid 2px "   theme.cta,
  };

  props.invert ? (style = invertStyle) : (style = buttonStyle);
  const [colorStyle, setColorStyle] = useState(false);
  colorStyle
    ? props.invert
      ? (style = buttonStyle)
      : (style = invertStyle)
    : props.invert
    ? (style = invertStyle)
    : (style = buttonStyle);
  return (
    <button
      onClick={() => {
        window.location.assign(props.link);
      }}
      onm ouseEnter={() => {
        setColorStyle(!colorStyle);
      }}
      onm ouseLeave={() => {
        setColorStyle(!colorStyle);
      }}
      className="ux-btn"
      style={style}
    >
      {props.content}
    </button>
  );
}

uj5u.com熱心網友回復：

你有const themeMode = themes.light;你的組件。這正是它所說的：將themeMode變數設定為常量themes.light。

當您嘗試（我假設）在事件處理程式中“更改它”時，您正在做const themeMode = darkmode ? themes.light : themes.dark;，但該函式中沒有其他內容（除了 a console.log） - 因為此變數僅適用于該一個函式，所以它不會改變外面的同名變數。

即使你讓它改變了外部變數（通過使用而不是宣告外部變數let而不是const在函式內部隱藏變數而是更新它的值），這對 React 來說根本不起作用。

解決方案是改用狀態：

• 替換const themeMode = themes.light為const [themeMode, setThemeMode] = useState(themes.light);
• 在事件處理程式中，替換const themeMode = darkmode ? themes.light : themes.dark;為setThemeMode(darkmode ? themes.light : themes.dark);

進行上述 2 項更改將起作用 - 但您仍然可以大大簡化您的組件。您不需要兩者darkMode和themeMode狀態，因為一個只是從另一個計算出來的。如果您只使用一個狀態變數，您也不需要useEffect基于另一個自動更新一個狀態變數。但是我會讓你解決這些問題 - 我希望這至少可以幫助你開始！

標籤：javascript html 反应 反应上下文 暗模式

上一篇：通過洗掉一些符合條件的元素來清理二進制numpy陣列

下一篇：如何定位這個i標簽