如何修復“TypeError：無法讀取未定義的屬性（讀取'useSystemColorMode'）”

Question

所以我正在使用 ChakraUI 和 React JS 來制作一個項目。 每當我啟動項目時，它都會給我錯誤“TypeError：無法讀取未定義的屬性（讀取'useSystemColorMode'）”。
我沒有編輯任何全局主題或脈輪中的任何內容。 我剛開始制作導航欄，使用 CSS 設計。 當我嘗試運行它時，它會顯示錯誤。 這是我的導航欄組件

import React from "react";
import { MenuItems } from "./MenuItems";
import "./navbar.css";

function Navbar() {
  return (
    <>
      <nav className='NavbarItems'>
        <h1 className='navbar-logo'></h1>
        <div className='menu-icon'></div>
        <ul>
          {MenuItems.map((item, index) => {
            return (
              <li key={index}>
                <a className={item.cname} href={item.url}>
                  {item.title}
                </a>
              </li>
            );
          })}
        </ul>
      </nav>
    </>
  );
}

export default Navbar;

導航欄 CSS 文件

.NavbarItems {
  height: 80px;
  display: flex;
  justify-content: center;
}

應用程序.js 文件

import { ChakraProvider } from "@chakra-ui/provider";
import Navbar from "./components/navbar";
function App() {
  return (
    <ChakraProvider>
      <Navbar />
    </ChakraProvider>
  );
}

export default App;

Answer 1

例如，您嘗試像這樣調用您的useSystemColorMode方法

this.arr.useSystemColorMode();

所以"TypeError: Cannot read properties of undefined (reading 'useSystemColorMode')"意味着this.arr是未定義的。 調試您的代碼以找出原因

Answer 2

所以基本上這是 ChakraUI 主題的問題，即使我沒有對 ChakraUI 主題或任何東西做任何事情。 我添加了 theme.js 文件，其中包括以下內容：

// theme.js

// 1. import `extendTheme` function
import { extendTheme } from "@chakra-ui/react";

// 2. Add your color mode config
const config = {
  initialColorMode: "light",
  useSystemColorMode: true,
};

// 3. extend the theme
const theme = extendTheme({ config });

export default theme;

然后我在 index.js 文件中包含以下內容：

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { ColorModeScript } from "@chakra-ui/color-mode";
import theme from "./theme";

ReactDOM.render(
  <React.StrictMode>
    <ColorModeScript initialColorMode={theme.config.initialColorMode} />
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

它奏效了。 如果有人遇到同樣的問題，您可以查看https://chakra-ui.com/docs/features/color-mode 。

Answer 3

一旦我使用 extendTheme 而不是 object 作為主題，錯誤就消失了。 https://chakra-ui.com/docs/theming/customize-theme

Answer 4

您應該做的第一件事是檢查消息類型的名稱（錯誤、成功、警告），如果拼寫錯誤，則會發生錯誤