Question

`class App extends React.Component {
  constructor() {
    super();
    this.sideBarToggleHandler = this.sideBarToggleHandler.bind(this);
    this.state = {
      sideBarOpen: true,
      backDropOpen: false,
      isPrim: true,
    }
  }
  componentDidMount() {
    console.log('componentdidmount')
  }

  sideBarToggleHandler = () => {
    this.setState((prevState) => {
      return { sideBarOpen: !prevState.sideBarOpen }
    })

    this.setState((prevState) => {
      return { backDropOpen: !prevState.backDropOpen }
    })
  }

  changeTheme = () => {
    this.setState((prevState) => {
      return { isPrim: !prevState.isPrim }
    })
  }

  render() {
    let backDrop;

    if (this.state.backDropOpen) {
      backDrop = <SideDrop />
    }

    return (
      <div className="App">
        <SimpleBar style={{ height: '100vh' }}>

          <ThemeSwitcher changeTheme={this.changeTheme} />

          <ToggleBar sideBarToggleHandler={this.sideBarToggleHandler} />

          {backDrop}

          <SideBar sideBarOpen={this.state.sideBarOpen} />

          <Switch>
            <Route exact path='/' component={HomePage} />
            <Route exact path='/about' render={() => <AboutPage isPrim={this.state.isPrim} />} />
            <Route exact path='/resume' render={() => <ResumePage isPrim={this.state.isPrim} />} />
            <Route exact path='/portfolio' component={PortfolioPage} />
            <Route exact path='/blog' component={BlogPage} />
            <Route exact path='/contact' component={ContactPage} />
          </Switch>
        </SimpleBar>
      </div>
    );
  }
}`

我想基于状态对象更改网站的主题，但是当主题首次更改并且导航到另一个页面组件时，它又变回原始主题，因此我添加了我的应用程序组件代码它对页面使用了React Router

Answer 1

反应状态仅保留在前端，这意味着每次刷新页面时都会创建一个新状态。您可以使用React router来避免在页面之间失去状态，https://stackoverflow.com/a/28314706可以处理多页面，而无需实际刷新网站。
您还可以使用本地存储来存储状态：{{3}}，
我会两者都做

Answer 2

通常不可能在刷新时保存状态值，您可以将其保存在本地存储中。并且如果使用路由库页面之一，则不应刷新。

刷新页面时，反应状态是否发生变化

2 个答案: