Reactjs 反应不'；无法呈现Auth0用户信息

大家好，我正在使用Auth0在我的ASP.NET应用程序中处理身份验证。我希望用户能够在登录到Auth0后登录，然后使用令牌重定向回应用程序，使用componentDidMount呈现应用程序以获取用户信息并将其显示在屏幕上。目前，它仅在我刷新页面时呈现信息

下面是my routes.jsx

let auth = new Auth();

const handleAuthentication = (props:any) => {
  if (/access_token|id_token|error/.test(props.location.hash)) {
    auth.handleAuthentication(props);
  }
}

export const routes = 
  <Layout auth={auth}>
    <Route exact path='/' render={(props) => <Home />} />
    <Route path='/counter' render={(props) => <Counter {...props} />} />
    <Route path='/fetchdata' render={(props) => <FetchData {...props} />} />
    <Route path="/callback" render={props => {
      handleAuthentication(props);
      return <Callback {...props} />
    }} />
  </Layout>;

let auth=new auth（）；
const handleAuthentication=（道具：any）=>{
if（/access_-token | id_-token | error/.test（props.location.hash））{
身份验证（道具）；
}
}
导出常量路由=
} />
} />
} />
{
手工认证（道具）；
返回
}} />
;

下面是我的Layout.jsx，我尝试在其中呈现componentDidMount上的用户信息：

export class Layout extends React.Component<LayoutProps, LayoutStates> {
  constructor(props: any) {
    super(props);
    this.state = {
      profile: null
    }
  }

  componentDidMount() {
    const { isAuthenticated, getProfile, userProfile } = this.props.auth;
    if (isAuthenticated()) {
      getProfile( (err: any, profile: any) => {
        this.setState({
          profile: profile
        })
      })
    }
  }

  public render() {
    const { profile } = this.state;
    return (
      <div className='container-fluid'>
        <div className='row'>
          <div className='col-sm-3'>
            <NavMenu auth={this.props.auth} />
          </div>
          <div className='col-sm-9'>
            <h1 style={{color: 'red'}}>{profile == null ? 'No User Found' : this.state.profile.name}</h1>
            {this.props.children}
          </div>
        </div>
      </div>);
  }
}

导出类布局扩展React.Component{
构造器（道具：任何）{
超级（道具）；
此.state={
配置文件：空
}
}
componentDidMount（）{
const{isAuthenticated，getProfile，userProfile}=this.props.auth；
如果（isAuthenticated（））{
getProfile（（错误：任意，配置文件：任意）=>{
这是我的国家({
简介：简介
})
})
}
}
公共渲染（）{
const{profile}=this.state；
返回(
{profile==null？“未找到用户”：this.state.profile.name}
{this.props.children}
);
}
}

下面是我的Auth.js服务：

export default class Auth {
  private _auth0 = new auth0.WebAuth({
    domain: 'my_client_domain',
    clientID: 'some_client_id',
    redirectUri: 'http://localhost:5000/callback',
    audience: 'http://localhost:5000/api/',
    responseType: 'token id_token',
    scope: 'openid profile'
  })

  userProfile: any;

  constructor() {
    this.login = this.login.bind(this);
    this.logout = this.logout.bind(this);
    this.handleAuthentication = this.handleAuthentication.bind(this);
    this.isAuthenticated = this.isAuthenticated.bind(this);
    this.getProfile = this.getProfile.bind(this);
  }

  handleAuthentication(props:any) {
    this._auth0.parseHash((err: any, authResult: any) => {
      if (authResult && authResult.accessToken && authResult.idToken) {
        this.setSession(authResult);
        props.history.replace('/');
      } else if (err) {
        props.history.replace('/');
        console.log(err);
        return err;
      }
    })
  }

  getProfile(cb: any) {
    if (this.isAuthenticated()) {
      const token = String(localStorage.getItem('access_token'));
      this._auth0.client.userInfo(token, (err, profile) => {
        if(profile) {
          this.userProfile = profile;
          cb(err,profile);
        } else {
          console.log(profile);
        }
      })
    }
  }

  setSession(authResult: any) {
    let expiresAt = JSON.stringify((authResult.expiresIn * 1000) + new Date().getTime());
    localStorage.setItem('access_token', authResult.accessToken);
    localStorage.setItem('id_token', authResult.idToken);
    localStorage.setItem('expires_at', expiresAt);
    history.replace('/');
  }

  logout() {
    localStorage.removeItem('access_token');
    localStorage.removeItem('id_token');
    localStorage.removeItem('expires_at');
    this.userProfile = null;
    history.replace('/');
  }

  login() {
    this._auth0.authorize();
  }

  isAuthenticated() {
    let expiresAt = JSON.parse(String(localStorage.getItem('expires_at')));
    return new Date().getTime() < expiresAt;
  }
}

导出默认类身份验证{
private _auth0=new auth0.WebAuth({
域：“我的客户域”，
clientID:“某个客户id”，
重定向URI:'http://localhost:5000/callback',
观众：'http://localhost:5000/api/',
responseType:“令牌id\u令牌”，
作用域：“openid配置文件”
})
userProfile:any；
构造函数（）{
this.login=this.login.bind（this）；
this.logout=this.logout.bind（this）；
this.handleAuthentication=this.handleAuthentication.bind（this）；
this.isAuthenticated=this.isAuthenticated.bind（this）；
this.getProfile=this.getProfile.bind（this）；
}
手工验证（道具：任何）{
此.u auth0.parseHash（（err:any，authResult:any）=>{
if（authResult&&authResult.accessToken&&authResult.idToken）{
此.setSession（authResult）；
props.history.replace（'/'）；
}否则如果（错误）{
props.history.replace（'/'）；
控制台日志（err）；
返回错误；
}
})
}
getProfile（cb:any）{
如果（this.isAuthenticated（））{
const token=String（localStorage.getItem（'access_token'）；
此._auth0.client.userInfo（令牌，（错误，配置文件）=>{
如果（配置文件）{
this.userProfile=profile；
cb（err，profile）；
}否则{
控制台日志（概要文件）；
}
})
}
}
设置会话（authResult:any）{
让expiresAt=JSON.stringify（（authResult.expiresIn*1000）+new Date（）.getTime（））；
setItem（'access_token'，authResult.accessToken）；
setItem（'id_token'，authResult.idToken）；
setItem（'expires_at'，expiresAt）；
历史。替换（“/”）；
}
注销（）{
localStorage.removietem（'access_token'）；
localStorage.removietem（'id_token'）；
localStorage.removietem（'expires_at'）；
this.userProfile=null；
历史。替换（“/”）；
}
登录（）{
这是。_auth0.authorize（）；
}
未经验证（）{
让expiresAt=JSON.parse（字符串（localStorage.getItem（'expires_at'））；
返回新日期（）；
}
}

---

感谢您的帮助。谢谢。

为了解释Rei Dien的评论，您要做的是使用

componentDidUpdate

（您可能会使用另一种生命周期方法）而不是

componentDidMount

componentDidUpdate() {
  const { isAuthenticated, getProfile, userProfile } = this.props.auth;
  if (isAuthenticated()) {
    getProfile( (err: any, profile: any) => {
      this.setState({
        profile: profile
      })
    })
  }
}

这样，当您的道具更改时，您的生命周期方法将启动，并且您的组件将按预期呈现。根据您的应用程序流以及用户登录时是否可以直接访问此页面，您可能仍然希望实现

componentDidMount

也许是这样的：

componentDidMount() {
  this.loadProfile();
}

componentDidUpdate() {
  this.loadProfile();
}

loadProfile() {
   const { isAuthenticated, getProfile, userProfile } = this.props.auth;
   if (isAuthenticated()) {
    getProfile( (err: any, profile: any) => {
      this.setState({
        profile: profile
      })
    })
  }
}

---

componentDidMount将只被调用一次，因此即使您的道具更改，componentDidMount也不会执行。简言之，这是一个错误的地方把你的条件