Javascript 试图通过更新Reactjs中的状态来更改背景

所以我正在写一个应用程序，上面有几个游戏。 我希望用户能够点击一个按钮，游戏就会出现在屏幕上，并且背景会改变颜色。 我想控制这个使用状态，以便整个应用程序的背景发生变化，而不仅仅是游戏组件

按照我现在的代码，游戏结束时状态会改变，但页面不会更新。有什么建议吗

这就是我的状态

state = {
  madLibsOut: false,
  ticTacOut: false,
  pigLatinOut: false,
  background: "green",
}

这是我试图改变它的一个例子。状态确实会改变，游戏会出现在屏幕上，但背景色不会更新

handleClickTicTacToe = () => {
  const out = this.state.ticTacOut
  const newColor = 'red'
  this.setState({ ticTacOut: true, background: newColor })
}

为防有用，以下是我如何设置样式：

appStyle={
  backgroundColor: this.state.background,
  height: "100vh",
  width: "100%",
}

render() {
  return (
    <div className="App" style={this.appStyle}>

appStyle={
背景颜色：this.state.background，
高度：“100vh”，
宽度：“100%”，
}
render（）{
返回(

---

谢谢！

您应该删除组件状态中的所有appStyle对象

像这样的方法应该会奏效：

  state = {
     madLibsOut: false,
     ticTacOut: false,
     pigLatinOut: false,
     appStyle:{
     backgroundColor: "green",
     height: "100vh",
     width: "100%",
    }
 }


  handleClickTicTacToe = () => {
    const out = this.state.ticTacOut
    let appStyle = this.state.appStyle
    appStyle.backgroundColor = 'red'
    this.setState({ticTacOut: true, appStyle:appStyle})
 }

  render() {
   return (
      <div className="App" style={this.state.appStyle}>

状态={
马德利布苏特：错，
蒂克塔克特：错，
pigLatinOut：错误，
appStyle：{
背景颜色：“绿色”，
高度：“100vh”，
宽度：“100%”，
}
}
handleClickTicTacToe=（）=>{
const out=this.state.ticTacOut
让appStyle=this.state.appStyle
appStyle.backgroundColor='红色'
this.setState（{ticTacOut:true，appStyle:appStyle}）
}
render（）{
返回(

使appStyle成为一个基于您的状态返回样式对象的函数

appStyle = () => {
    return {
        backgroundColor:this.state.backgroundColor
    }
}

---

您的问题是，您正在将状态设置为类变量，并且它被实例化一次，并且该值将永远不会更改

假设你已经启用了ES6，你应该做一些类似于@Allessandro Messori所说的事情。 但是在他的解决方案中，修改对象的属性并设置状态是不好的

设置状态时，通常应创建一个新对象来设置状态。在这种情况下，样式对象应为新对象

state = {
  madLibsOut: false,
  ticTacOut: false,
  pigLatinOut: false,
  appStyle: {
    backgroundColor: "green",
    height: "100vh",
    width: "100%",
  } 
}


handleClickTicTacToe = () => {
  const out = this.state.ticTacOut
  // Use Object.assign(this.state.appStyle, { backgroundColor: 'red' }); if no ES6 enabled
  const newStyle = { ...this.state.appStyle, backgroundColor: 'red' }; 
  this.setState({ ticTacOut: true, appStyle: newStyle })
}

render() {
  return (
    <div className="App" style={this.state.appStyle}>

状态={
马德利布苏特：错，
蒂克塔克特：错，
pigLatinOut：错误，
appStyle：{
背景颜色：“绿色”，
高度：“100vh”，
宽度：“100%”，
} 
}
handleClickTicTacToe=（）=>{
const out=this.state.ticTacOut
//使用Object.assign（this.state.appStyle，{backgroundColor:'red'}）；如果未启用ES6
const newStyle={…this.state.appStyle，backgroundColor:'red'}；
this.setState（{ticTacOut:true，appStyle:newStyle}）
}
render（）{
返回(

另一个选项是创建一个函数，返回您的样式，该样式将始终根据您的状态进行更新

getAppStyle = () => {
  return {
    backgroundColor: this.state.background,
    height: "100vh",
    width: "100%",
  };
}

render() {
  const style = this.getAppStyle();
  return (
    <div className="App" style={style}>

getAppStyle=（）=>{
返回{
背景颜色：this.state.background，
高度：“100vh”，
宽度：“100%”，
};
}
render（）{
const style=this.getAppStyle（）；
返回(

“我做了这些更改，得到了一个错误，上面写着‘TypeError:Cannot assign to read only property‘backgroundColor’of object’。#”它似乎对写着appStyle.backgroundColor=‘red’的行很生气，尝试用let而不是const来声明appStyle