物料UI开关不更改UI

Question

我正在使用Material UI的开关来改变多页应用程序的主题。发生的唯一错误是交换机不能从左向右移动(ui功能不会出现)，但onChange功能工作正常。我尝试了一下，结果是当我移除forceUpdate()时，material ui开关将会工作，但是组件将不会被重新渲染。forceUpdate中有什么原因导致交换机功能无法正常工作？

App.tsx：

import React from "react"
import {Switch, Route, BrowserRouter, Redirect} from "react-router-dom"
import Main from "./Main"
import {createMuiTheme, ThemeProvider} from "@material-ui/core";

class App extends React.Component<any, any>{

darkmode=true

theme=createMuiTheme({
    palette:{
        type:this.darkmode?"dark" : "light"

    },
})

changeTheme=()=>{
    this.darkmode=!this.darkmode;
   
    this.theme = createMuiTheme({
        palette:{
            type:this.darkmode?"dark" : "light"
        }
    })
    this.theme.spacing(10)
    this.forceUpdate()
}


render(){
    return(
       
   
           <div>
                <BrowserRouter>
                    <Switch>
                        <Route  path="/" component={()=>
                            <Main theme={this.theme} changeTheme={this.changeTheme} />
                        }
                                                    
                    </Switch>
                </BrowserRouter>

           </div>

       

    )
}

}

Main.tsx：

class Main extends React.Component<any,any>{
    render(){
        return(
            <div>
                <Switch onChange={()=>this.props.changeTheme()}></Switch>
                <Switch></Switch>
            </div>
        )
    }
}

Answer 1

您没有使用状态如果不传递新状态，UI将不会重新呈现

  constructor(props) {
    super(props);
    this.state = {darkmode: true};
  }
this.setState({
      darkmode: !darkmode
    });

这里的两段代码将帮助您初始化状态，第二段是更新

默认情况下，当组件的状态或属性发生更改时，组件将重新呈现。如果您的render()方法依赖于其他一些数据，您可以通过调用forceUpdate()来告诉React该组件需要重新呈现。

取自react doc，它解释了它基本上做了什么，它是通过强制所有你应该避免使用的组件重新生成的，并从属性和状态中读取