使用条件导致 React 渲染限制错误

Question

我做了一个深色模式功能。有使用复选框和获取当前时间来更改此模式。当我编写传统的 If 语句时，它会导致渲染限制错误（如堆栈溢出）。

这是我的代码：

const curTime = new Date();
let t = curTime.getHours().valueOf();
const [isNight, setDarkMode] = useState(false);

if (t >= 6 && t <= 19) {
    document.documentElement.classList.remove("dark-mode");
    setDarkMode(false);
} else {
    document.documentElement.classList.add("dark-mode");
    setDarkMode(true);
}

const handleChecked = e => {
    if (e.target.checked === true) {
        document.documentElement.classList.add("dark-mode");
        setDarkMode(true);
    } else {
        document.documentElement.classList.remove("dark-mode");
        setDarkMode(false);
    }
};

<input id="myCheck" type="checkbox" onChange={handleChecked} defaultChecked={isNight} />

我无法从 Internet 上找到解决方案。

我认为答案是使用 UseEffect 方法，但我真的不知道如何在我的情况下使用它。或者这个复选框会导致这个无限变化的值？

你能帮我解决这个问题吗？

Answer 1

在 React 风格中我会这样做：

 import React, { useState, useEffect } from "react";

const App = () => {
  const [isNight, setDarkMode] = useState(false);

  useEffect(() => {
    let t = new Date().getHours().valueOf();
    setDarkMode(t < 6 || t > 19);
  }, []);

  return (
    <div className={isNight ? "dark-mode" : "light-mode"}>
      <div>{isNight ? "dark-mode" : "light-mode"}</div>
      <input
        type="checkbox"
        onChange={(e) => setDarkMode(e.target.checked)}
        checked={isNight}
        name="darkModeInput"
      />
      <label htmlFor="darkModeInput">Switch dark mode</label>
    </div>
  );
};

export default App;

使用条件导致 React 渲染限制错误

Using Conditions cause React render limit error

javascript

if-statement

gettime

reactjs