Question

我有一个基于夜间模式（黑色）和白天模式（蓝色）的组件渲染。根据按钮的按下切换模式。问题是由于某种原因它呈现为白色。初始渲染后，它会恢复为正常颜色（黑色/蓝色），但最初是白色。我有useEffect寻找更改，因此它不应该在初始渲染上运行并将颜色设置为蓝色或黑色吗？

这就是提供颜色的原因。按下按钮时会触发此功能：

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

//INITIAL should be #55BAF1 (blue) but it's rendering as white
const [nightMode, setNightMode] = React.useState({
  background: "#FFFFFF",
  bannerText: "#FFFFFF",
  listText: "#000000",
  banner: "#55BAF1",
  inputBackground: "FFFFFF",
});

function switchNightMode(){
  const lightMode = {
      background: "#413250", 
      bannerText: "#413250",
      listText: "#FFFFFF", 
      banner: "#FFFFFF",
      inputBackground: "#465C68"
  }
  const darkMode = {
      background: "#FFFFFF" ,
      bannerText: "#FFFFFF" ,
      listText: "#000000",
      banner: "#55BAF1",
      inputBackground: "#465C68"
    }
  
  let currentMode;
  let currSavedBackground;
  
  if(isNightMode){
    setIsNightMode(false);
    currentMode = lightMode;
    currSavedBackground = "#413250";
    document.body.style.backgroundColor = currSavedBackground;
  } else {
    setIsNightMode(true);
    currentMode = darkMode;
    currSavedBackground = "#FFFFFF";
    document.body.style.backgroundColor = currSavedBackground;
  }
  
  setNightMode(currentMode);   
  
  //state is stored in case the app is closed and the user comes back
  localStorage.setItem("startupNightMode", JSON.stringify(currentMode));
}

使用效果寻找变化：

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

这是最初呈现为白色的组件。 nightMode.banner使用的是颜色：

<Card style = {{marginBottom: 25, width: window.innerWidth/4, borderRadius: 30, backgroundColor: nightMode.banner, color: nightMode.bannerText, raised: true}}>
   <CardContent>
    <div style = {{display: 'flex', fontFamily: 'Work Sans', fontSize: 55}}>
      <text>{currDate}</text>
    </div>
    <text style = {{display: 'flex', fontFamily: 'Work Sans', fontSize: 45}}>{currTime}</text>
  </CardContent>
</Card>

Answer 1

useEffect在第一个渲染之后第一次运行（等效于类组件中的componentDidMount），因此在第一次渲染时，它将使用任何初始值传递给useState。

在您的情况下：

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

您可以通过将true作为初始状态来默认设置为黑暗模式：

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

或者您可以有条件地渲染组件以推迟渲染，直到useEffect首次运行。

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

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

return (
  { isNightMode !== null && (
    <Card style={{ marginBottom: 25, width: window.innerWidth / 4, borderRadius: 30, backgroundColor: nightMode.banner, color: nightMode.bannerText, raised: true }}>
      <CardContent>
        <div style={{ display: 'flex', fontFamily: 'Work Sans', fontSize: 55 }}>
          <text>{currDate}</text>
        </div>
        <text style={{ display: 'flex', fontFamily: 'Work Sans', fontSize: 45 }}>{currTime}</text>
      </CardContent>
    </Card>
  )}
)

组件颜色的初始渲染出现问题

1 个答案: