Reactjs 本地存储和实际值之间的冲突

“我的组件”的颜色会根据白天/晚上模式发生变化，如果应用程序关闭，则会在夜间模式下本地保存为对象。问题是，只有当用户按下按钮切换到日间/夜间模式时，颜色才会在本地保存。因此，当应用程序第一次打开时，nightMode被赋予一个值，但localStorage仍然为null。因此，当useEffect运行时，它会覆盖我的nightMode值并使其为null。我怎样才能克服这个问题

初始值：

const [isNightMode, setIsNightMode] = React.useState(false); 

const [nightMode, setNightMode] = React.useState({
    background: "#FFFFFF",
    bannerText: "#FFFFFF",
    listText: "#000000",
    banner: "#55BAF1",
    inputBackground: "FFFFFF",
  });

function nightMode(){
   const light = #FFFFFF
   const dark = #55BAF1
   
   if(isNightMode){
      setNightMode(dark);
      localStorage.setItem("startupMode", JSON.stringify(dark));
   }
   else(isNightMode){
      setNightMode(light);
      localStorage.setItem("startupMode", JSON.stringify(light));
   }
} 

React.useEffect(() => {
  const sessionSettings = JSON.parse(localStorage.getItem("startupNightMode")) || [];
  setNightMode(sessionSettings);
}, []);

本地保存颜色的函数的伪版本：

const [isNightMode, setIsNightMode] = React.useState(false); 

const [nightMode, setNightMode] = React.useState({
    background: "#FFFFFF",
    bannerText: "#FFFFFF",
    listText: "#000000",
    banner: "#55BAF1",
    inputBackground: "FFFFFF",
  });

function nightMode(){
   const light = #FFFFFF
   const dark = #55BAF1
   
   if(isNightMode){
      setNightMode(dark);
      localStorage.setItem("startupMode", JSON.stringify(dark));
   }
   else(isNightMode){
      setNightMode(light);
      localStorage.setItem("startupMode", JSON.stringify(light));
   }
} 

React.useEffect(() => {
  const sessionSettings = JSON.parse(localStorage.getItem("startupNightMode")) || [];
  setNightMode(sessionSettings);
}, []);

问题原因（将夜间模式设置为空）：

const [isNightMode, setIsNightMode] = React.useState(false); 

const [nightMode, setNightMode] = React.useState({
    background: "#FFFFFF",
    bannerText: "#FFFFFF",
    listText: "#000000",
    banner: "#55BAF1",
    inputBackground: "FFFFFF",
  });

function nightMode(){
   const light = #FFFFFF
   const dark = #55BAF1
   
   if(isNightMode){
      setNightMode(dark);
      localStorage.setItem("startupMode", JSON.stringify(dark));
   }
   else(isNightMode){
      setNightMode(light);
      localStorage.setItem("startupMode", JSON.stringify(light));
   }
} 

React.useEffect(() => {
  const sessionSettings = JSON.parse(localStorage.getItem("startupNightMode")) || [];
  setNightMode(sessionSettings);
}, []);

---

我通过让useEffect存储一个值（如果为null）来解决这个问题。这是一种强力解决问题的方法，但它确实有效

React.useEffect(() => {

    const currSavedColor = JSON.parse(localStorage.getItem("startupNightMode")) || [];

    const lightMode = {
      background: "#FFFFFF" ,
      bannerText: "#FFFFFF" ,
      listText: "#000000",
      banner: "#55BAF1",
      inputBackground: "#465C68"
    }

    if(currSavedColor.banner !== "#FFFFFF"){
      localStorage.setItem("startupNightMode", JSON.stringify(lightMode));
      const sessionSettings = JSON.parse(localStorage.getItem("startupNightMode")) || [];
      setNightMode(sessionSettings);
    }
    else{
      const sessionSettings = JSON.parse(localStorage.getItem("startupNightMode")) || [];
      setNightMode(sessionSettings);
    }
  }, []);

---

您的意思是

setNightMode

将其设置为

null

？我的意思是

setNightMode（null）

？顺便问一下，为什么您有

其他（要观察的值）

？你不是说如果（…）的话，

？或者只需编写
if（nightMode）{…}或者{…}
+1，如果将
[]
指定为
回退\默认值
转换为
布尔真值
，那么
isNightMode
将为真。只要试试
！！[]
这将产生
true
问题不是isNightMode，而是object nightMode。在启动时，我给nightMode一个初始值，但在localStorage中它仍然为null。因此，useEffect运行并将nightMode设置为空对象。我正在试图找到一种在初始启动时在localStorage中定义nightMode对象的方法。您是否尝试从else中删除
isNightMode
？