Question

我正在使用状态来跟踪各种颜色，当用户切换到夜间模式时，它将更新状态并更改组件的颜色。我正在使用localStorage来存储这些更改，但是它存储的是正确的配色方案的反面。因此，它将在夜间模式下正确显示黑色背景，但在白天模式下应保存白色背景。该代码位于下面（该功能最重要的第三段代码）。

初始颜色

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

更新夜间模式对象

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

切换配色方案的功能

function switchNightMode(){
  if(isNightMode){ 
    setIsNightMode(false);  
  }
  else{
    setIsNightMode(true);
  }

  if(isNightMode){
    setNightMode(
      {
        background: "#413250", 
        bannerText: "#413250",
        listText: "#FFFFFF", 
        banner: "#FFFFFF",
        inputBackground: "#465C68"
      });   

      localStorage.setItem("startupNightMode", JSON.stringify(nightMode));   //SAVES OPPOSITE
  }
  else{
    setNightMode({
      background: "#FFFFFF" ,
      bannerText: "#FFFFFF" ,
      listText: "#000000",
      banner: "#55BAF1",
      inputBackground: "#465C68"
    });

    localStorage.setItem("startupNightMode", JSON.stringify(nightMode));   //SAVES OPPOSITE
  }
}

状态已更新，然后将其保存在localStorage中，所以我不确定为什么要保存未更新的版本。

Answer 1

设置状态为asynchronous，因此在将其推送到localStorage之前可能不会更新。改用变量：

const mode = isNightMode ? {
    background: "#413250", 
    bannerText: "#413250",
    listText: "#FFFFFF", 
    banner: "#FFFFFF",
    inputBackground: "#465C68"
} : {
    background: "#FFFFFF" ,
    bannerText: "#FFFFFF" ,
    listText: "#000000",
    banner: "#55BAF1",
    inputBackground: "#465C68"
};

setNightMode(mode);

localStorage.setItem("startupNightMode", JSON.stringify(mode));

编辑：已更新，通过用ternary operation替换if / else来简化代码。

localStorage保存非更新状态，即使它在setState之后

1 个答案: