无法读取 useEffect 函数中的属性

Question

下面，我向大家介绍一下我一直面临的问题。我一直在运行一个内置在 React 上的 react 项目。作为 React 生态系统的新手，我无法弄清楚如何解决这个问题。

我们有一个名为 Home.js 的文件

import { useEffect } from 'react';

import bg from '../../images/bg.webp';

import * as uiService from '../../services/ui';

const Home = () => {

  useEffect(() => {
    window.onload = function () {
      uiService.showDarkHeader();
    }
  }, []);

  return (
    <div className="home">
      <img src={bg} alt="bg" />
      <div className="home__title">
        <h1>Could not find the place to go?</h1>
        <h1>Great!</h1>
        <div className="home__button-container">
          <button>Quick Search</button>
        </div>
      </div>
    </div>
  )
};

export default Home;

另一个文件名为 ui.js，我们在其中配置 js 的所有功能。

export const alert = message => {
  window.alert(message);
};

export const showLoading = () => {
  const loading = document.getElementById("loading");
  loading.classList.remove("hidden");
  loading.classList.add('shown');
};

export const hideLoading = () => {
  const loading = document.getElementById("loading");
  loading.classList.remove("shown");
  loading.classList.add("hidden");
};

export const showDarkHeader = () => {
  const header = document.getElementById("header");
  const headerLeft = document.getElementById("header-left");
  const headerRight = document.getElementById("header-right");
  const headerMiddle = document.getElementById("header-middle");
  const headerMiddleItems = document.getElementsByClassName("header__middle-item");
  const headerActions = document.getElementsByClassName("header__action");

  const search = document.getElementById("search");
  const searchContainer = document.getElementById("search-container");

  header.classList.remove("header--light");
  headerLeft.classList.remove("header__left--light");
  headerRight.classList.remove("header__right--light");
  headerMiddle.classList.remove("header__middle--light");
  for (let i = 0; i < headerMiddleItems.length; i++) {
    headerMiddleItems[i].classList.remove("header__middle-item--light");
  }
  for (let i = 0; i < headerActions.length; i++) {
    headerActions[i].classList.remove("header__action--light");
  }

  search.classList.remove("search--light");
  searchContainer.classList.remove("search__container--light");

  document.body.style.background = "#000";
};

export const showLightHeader = () => {
  const header = document.getElementById("header");
  const headerLeft = document.getElementById("header-left");
  const headerRight = document.getElementById("header-right");
  const headerMiddle = document.getElementById("header-middle");
  const headerMiddleItems = document.getElementsByClassName("header__middle-item");
  const headerActions = document.getElementsByClassName("header__action");

  const search = document.getElementById("search");
  const searchContainer = document.getElementById("search-container");

  header.classList.add("header--light");
  headerLeft.classList.add("header__left--light");
  headerRight.classList.add("header__right--light");
  headerMiddle.classList.add("header__middle--light");
  for (let i = 0; i < headerMiddleItems.length; i++) {
    headerMiddleItems[i].classList.add("header__middle-item--light");
  }
  for (let i = 0; i < headerActions.length; i++) {
    headerActions[i].classList.add("header__action--light");
  }

  search.classList.add("search--light");
  searchContainer.classList.add("search__container--light");

  document.body.style.background = "#fff";
};

正如您在 Home.js 中看到的，我们正在导入它并使用 useEffect 在下载功能上呈现它。

但是当我运行 npm run start 时。我面临一个错误提示，指出无法读取 null 的属性。

我是否需要检查 useEffect 或代码中需要更改的内容？

下面，我分享了错误：

TypeError: Cannot read properties of null (reading 'classList')
Module.showDarkHeader
C:/Users/DELL/Desktop/airbnb/src/services/ui.js:28
  25 |  const search = document.getElementById("search");
  26 |  const searchContainer = document.getElementById("search-container");
  27 | 
> 28 |  header.classList.remove("header--light");
     | ^  29 |  headerLeft.classList.remove("header__left--light");
  30 |  headerRight.classList.remove("header__right--light");
  31 |  headerMiddle.classList.remove("header__middle--light");
View compiled
window.onload
C:/Users/DELL/Desktop/airbnb/src/components/home/Home.js:11
   8 | 
   9 |  useEffect(() => {
  10 |    window.onload = function () {
> 11 |      uiService.showDarkHeader();
     | ^  12 |    }
  13 |  }, []);
  14 | 
View compiled

谢谢，非常感谢您的想法。

Answer 1

您缺少“标题”的 id，它应该在这里： <h1 id="header">Could not find the place to go?</h1> 在您的 showDarkMode() 函数中，它找不到标头并在尝试访问 header.classList 时触发“无法读取 null 属性”错误。 小心将 ids “header-left”... 放在正确的组件中。

作为旁注，我要补充一点，这不再是在 React 中完成这种事情的方式了。 您可以使用一个会在运行时更改的类，而不是让 showDarkMode 手动查找和修改 css 类，如下所示：

export const showDarkHeader = () => {
const [isDarkMode, setIsDarkMode] = React.useState(true);// We store if the website is dark mode in a variable that defaults to true when the page is displayed.
///...
return (
/*...*/
<h1 id="header" className={isDarkMode ? 'header': 'header header--light'}>Could not find the place to go?</h1>
/*...*/
)
///...
}

您可以将其扩展到您的所有组件。这样，React 只会在 isDarkMode 更改时更新 UI。