Reactjs 在状态更改时获取要更新的组件的问题

当用户按下按钮时，它会激活夜间模式，该模式会更改各种颜色，例如背景色。根据我的理解，当状态改变时，使用它的组件也应该改变。目前，我已经确认状态正在改变，但屏幕上的组件没有改变。谢谢你的帮助

此处定义的状态

const[isNightMode, setIsNightMode] = React.useState(false)   //Checks if currently in night mode

  const [nightMode, setNightMode] = React.useState({   //Settings of the actual night mode
    background: "#FFFFFF",
    bannerText: "#000000",
    listText: "#FFFFFF",
    banner: "#48cae4",
  });

function nightmode(){

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

    if(isNightMode){
      setNightMode({background: "#000000"});   //Here the colors are changed 
      setNightMode({bannerText: "#FFFFFF"});   //but the screen does not update
      setNightMode({listText: "#000000"});
      setNightMode({banner: "#48cae4"});
    }
    else{
      setNightMode({background: "#FFFFFF"});
      setNightMode({bannerText: "#000000"});
      setNightMode({listText: "#FFFFFF"});
      setNightMode({banner: "#48cae4"});
    }
  }

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

触发状态更改的功能

const[isNightMode, setIsNightMode] = React.useState(false)   //Checks if currently in night mode

  const [nightMode, setNightMode] = React.useState({   //Settings of the actual night mode
    background: "#FFFFFF",
    bannerText: "#000000",
    listText: "#FFFFFF",
    banner: "#48cae4",
  });

function nightmode(){

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

    if(isNightMode){
      setNightMode({background: "#000000"});   //Here the colors are changed 
      setNightMode({bannerText: "#FFFFFF"});   //but the screen does not update
      setNightMode({listText: "#000000"});
      setNightMode({banner: "#48cae4"});
    }
    else{
      setNightMode({background: "#FFFFFF"});
      setNightMode({bannerText: "#000000"});
      setNightMode({listText: "#FFFFFF"});
      setNightMode({banner: "#48cae4"});
    }
  }

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

使用这些应更新状态的组件示例

const[isNightMode, setIsNightMode] = React.useState(false)   //Checks if currently in night mode

  const [nightMode, setNightMode] = React.useState({   //Settings of the actual night mode
    background: "#FFFFFF",
    bannerText: "#000000",
    listText: "#FFFFFF",
    banner: "#48cae4",
  });

function nightmode(){

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

    if(isNightMode){
      setNightMode({background: "#000000"});   //Here the colors are changed 
      setNightMode({bannerText: "#FFFFFF"});   //but the screen does not update
      setNightMode({listText: "#000000"});
      setNightMode({banner: "#48cae4"});
    }
    else{
      setNightMode({background: "#FFFFFF"});
      setNightMode({bannerText: "#000000"});
      setNightMode({listText: "#FFFFFF"});
      setNightMode({banner: "#48cae4"});
    }
  }

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

星期二
11:45

setNightMode

应整体更新对象。不仅仅是一种财产

function nightmode(){

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

if(isNightMode){
  setNightMode(
    {
      background: "#000000" , 
      bannerText: "#FFFFFF" ,
      listText: "#000000" , 
      banner: "#48cae4"
    });   
 }
 else{
   setNightMode({
     background: "#FFFFFF" ,
     bannerText: "#000000" ,
     listText: "#FFFFFF",
     banner: "#48cae4"
   });
  
 }
}

---

谢谢你，这是有效的，出于好奇，为什么单独改变状态不会产生同样的效果。不是每种颜色都应该一个一个地更新吗。state

nightMode

的值为

{background:“FFFFFF”，bannerText:“000000”，listText:“ffffffff”，banner:“48cae4”，}

setNightMode（）

更改整个状态，而不仅仅是部分状态。因此，当您更改状态，如

setNightMode（{listText:{000000}）

时，状态

nightMode

将更新为

{listText:{000000}

并丢失其他三个属性。因此，必须使用更新的属性对整个对象进行pas，以使代码按预期运行。