Reactjs 组件颜色的初始渲染问题

我有一个基于夜间模式（黑色）和日间模式（蓝色）的组件渲染。它根据按钮按下来切换模式。问题是出于某种原因，它呈现为白色。初始渲染后，它会返回到正常颜色（黑色/蓝色），但最初是白色。我使用了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);
}, []);

<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>

使用效果查找更改：

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);
}, []);

<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>

这是最初渲染为白色的组件。nightMode.banner是使用颜色的工具：

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);
}, []);

<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>

{currDate}
{currTime}

useffect

在第一次渲染后第一次运行（相当于类组件中的

componentDidMount

），因此在第一次渲染时，它将使用传递给

useState

的任何初始值

就你而言：

const[isNightMode，setIsNightMode]=React.useState（false）

通过传递
true
作为初始状态，您可以默认为暗模式：

const[isNightMode，setIsNightMode]=React.useState（true）

或者，可以有条件地渲染组件，以延迟渲染，直到第一次运行
useffect

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>
  )}
)


const[isNightMode，setIsNightMode]=React.useState（null）
React.useffect（（）=>{
const sessionSettings=JSON.parse（localStorage.getItem（“startupNightMode”））| |[]；
设置夜间模式（会话设置）；
}, []);
返回(
{isNightMode！==null&&(
{currDate}
{currTime}
)}
)
useEffect在初始渲染后第一次运行（相当于基于类的组件中的componentDidMount），因此在第一次渲染时，它使用传递给
useState的初始状态
为什么使用useContext进行此操作
useContext
对于处理主题来说是相当标准的，这是真的，但即使它被保存在一个单独的钩子中，它仍然只是一个状态值；它仍然会对op注意到的时间问题很敏感。很抱歉，我刚刚意识到我遗漏了一段代码，这是传递到钩子中的初始值。我对代码进行了编辑，将其包括在内，因此初始渲染应该是“#55BAF1”或蓝色。由于某些原因，它最初以白色呈现。我也尝试了您建议的条件呈现，但它再次以白色呈现