Reactjs 在React中的管理/用户视图之间切换

我知道有很多类似的问题，但我找不到解决办法，我被困了一段时间。如果有人能帮我，我会很高兴的。 我试图让我的应用程序在管理员和用户视图之间切换。我进入应用程序以Adminview开始，当按下用户按钮时，它转到Userview。但是当按下管理员按钮时，我无法返回管理员视图

如果有人有额外的时间向我解释，我会非常感激

我的代码：

import React from "react";
import AdminView from "./components/adminView";
import UserView from "./components/userView";
import "./App.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.changeUser = this.changeUser.bind(this); 
      adminView: true,
  }

  changeUser(isAdmin) {
    this.setState({adminView : isAdmin => { 
     this.adminView = !this.adminView
    } 
  });
  };

  render() { 
    if (this.state.adminView === true) {
    return (
      <div className="container text-center">
      <div className="btn-group">
        <button onClick={() => this.changeUser(true)}>ADMIN</button>
        <button onClick={() => this.changeUser(false)}>USER</button>
      </div>
        <AdminView addProject={newProject => this.addProject(newProject)} />
      </div>
    );
    } else {
      return (
        <div className="container text-center">
        <div className="btn-group">
        <button onClick={() => this.changeUser(true)}>ADMIN</button>
        <button onClick={() => this.changeUser(false)}>USER</button>
      </div>
          <UserView />
        </div>
      )
     }
  }
}
export default App;

从“React”导入React；
从“/components/AdminView”导入AdminView；
从“/components/UserView”导入用户视图；
导入“/App.css”；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.changeUser=this.changeUser.bind（this）；
adminView：是的，
}
变更用户（isAdmin）{
this.setState（{adminView:isAdmin=>{
this.adminView=！this.adminView
} 
});
};
render（）{
if（this.state.adminView==true）{
返回(
this.changeUser（true）}>ADMIN
this.changeUser（false）}>USER
this.addProject（newProject）}/>
);
}否则{
返回(
this.changeUser（true）}>ADMIN
this.changeUser（false）}>USER
)
}
}
}
导出默认应用程序；

我试图让我的例子切中要害，并尽可能做一些小的改动。您可以在此处找到代码的修订版本：

`

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.changeUser=this.changeUser.bind（this）；
//这部分不见了
此.state={
adminView：是的，
}
}
变更用户（isAdmin）{
//您应该更改状态属性，在以前的版本中，您将函数分配给adminView，而不是将函数传递给setState函数
this.setState（（{adminView}）=>({
adminView:！adminView，
}));
};
render（）{
if（this.state.adminView==true）{
返回(
{/*因为您没有真正使用isAdmin变量，所以可以删除它？*/}
管理
使用者
管理视图
);
}否则{
返回(
管理
使用者
用户视图
)
}
}
}
console.log（'here'，document.getElementById（'app'））
ReactDOM.render（

我在下面列出了更改，但是您应该首先直接检查codepen，因为我试图对错误进行评论，它们应该更容易理解

第一件事是您没有分配初始状态，我认为adminView:true在您尝试运行时应该会产生错误

第二个错误是错误地使用setState在您的示例中，您将adminView的值设置为函数，我认为这不是代码的目的

codepen上的最后一个更改更像是一个清理，我从回调中删除了true/false参数，因为该函数被设计为用作切换（如果我正确获得代码的话）

注意：作为一个新的贡献者：我在这里是新的：），我不确定对your代码的其他修复/更改是否应该是这个答案的一部分。但是如果您需要更多帮助，请告诉我，我将尝试编辑我的更改
 您确定
adminView
是一个状态吗？代码显示它只是一个变量而不是一个状态
class App extends React.Component {
  constructor(props) {
    super(props);
    this.changeUser = this.changeUser.bind(this);

    // this part was missing
    this.state = {
      adminView: true,
    }
  }

  changeUser(isAdmin) {
    // you should alter state properties, in previous version you were assingning a function to adminView not passing a function to setState function
    this.setState(({adminView}) => ({
      adminView: !adminView,
    }));
  };

  render() {
    if (this.state.adminView === true) {
    return (
      <div className="container text-center">
      <div className="btn-group">
        { /* since you are not really using isAdmin variable you can remove it ? */ }
        <button onClick={this.changeUser}>ADMIN</button>
        <button onClick={this.changeUser}>USER</button>
      </div>
        Admin View
      </div>
    );
    } else {
      return (
        <div className="container text-center">
        <div className="btn-group">
        <button onClick={this.changeUser}>ADMIN</button>
        <button onClick={this.changeUser}>USER</button>
      </div>
          User View
        </div>
      )
     }
  }
}

console.log('here', document.getElementById('app'))
ReactDOM.render(<App />, document.getElementById('example'));