警告：のみ更新することができますマウントまたはこれは完全な誤りであるコンポーネント

Question

を取り付ける：

index.js:2177 Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.

それが何を意味するのでしょうか？私は何をしてエラーを生成していますか？

これは私のログインページです：ページが読み込まれると、それは第2の再ルーティングの前に分割するために<div id="my-signin2"></div>をロードしているいくつかの理由

/* global gapi */ 

class SignIn extends React.Component{ 

    constructor(props){ 
     super(props); 
     this.state = { 
      redirect: false 

     } 
     this.onSignIn = this.onSignIn.bind(this) 
     this.updateRedirect = this.updateRedirect.bind(this) 
     // this.test = this.test.bind(this) 
    } 

    componentWillMount() { 
     console.log('componentWillMount ran') 
     gapi.load('auth2',() => { 
      gapi.auth2.init({ 
       client_id: '817677528939-dss5sreclldv1inb26tb3tueac98d24r' 
      }).then((auth2) => { 
       console.log("signed in: " + auth2.isSignedIn.get()) 
       this.setState({ 
        redirect: auth2.isSignedIn.get() 
       }) 
      }) 
     }) 
    } 

    updateRedirect() { 
     this.setState({ 
      redirect: true 
     }) 
    } 

    componentDidMount() { 
     gapi.signin2.render('my-signin2', { 
      'scope': 'profile email', 
      'width': 300, 
      'height': 50, 
      'longtitle': true, 
      'theme': 'dark', 
      'onsuccess': this.onSignIn, 
     }); 
    } 


    onSignIn(googleUser) { 
     console.log('this ran') 
     var profile = googleUser.getBasicProfile(); 
     console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead. 
     console.log('Name: ' + profile.getName()); 
     console.log('Image URL: ' + profile.getImageUrl()); 
     console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present. 
     this.updateRedirect() 
    } 

    render() { 
     return (
      this.state.redirect ? 
      <Redirect to='/options' /> 
      : 
      <div> 
       <AppBar title="Pliny" showMenuIconButton={false} zDepth={2} /> 
       <div id="my-signin2"></div> 
      </div> 
     ) 
    }  
} 

export default SignIn 

。したがって、ユーザーはログインページのフラッシュが画面に表示されていることを確認し、正しいページにルーティングします。

ページが読み込まれる前に再ルーティングする方法はありますか？

理想的には、ユーザーがログインしているかどうかを確認したい場合は、すぐに特定のページにルーティングします。ユーザーががログインしていない場合は、それらをログインページ（<div>）

Answer 1

gapi.loadメソッドを上位コンポーネントに移動するまでは、常にフラッシュが表示されます。それが呼び出す関数は約束です。つまり、その関数が要求されている間は、コンポーネントが引き続きレンダリングされます。私はそれを自分のコンポーネントの1つ上のレベルに移動し、ログインページをそのコンポーネントの子にします。

EDIT：

は、ここに例を示します

class AuthUser extends React.Component { 
    constructor(props){ 
     super(props); 
     this.state = { 
      redirect: false 
      loaded: false 
     } 
     this.onSignIn = this.onSignIn.bind(this) 
     this.updateRedirect = this.updateRedirect.bind(this) 
     // this.test = this.test.bind(this) 
    } 

    onSignIn(googleUser) { 
     console.log('this ran') 
     var profile = googleUser.getBasicProfile(); 
     console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead. 
     console.log('Name: ' + profile.getName()); 
     console.log('Image URL: ' + profile.getImageUrl()); 
     console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present. 
     this.updateRedirect() 
    } 
    componentWillMount() { 
     console.log('componentWillMount ran') 
     gapi.load('auth2',() => { 
      gapi.auth2.init({ 
       client_id: '817677528939-dss5sreclldv1inb26tb3tueac98d24r' 
      }).then((auth2) => { 
       console.log("signed in: " + auth2.isSignedIn.get()) 
       this.setState({ 
        redirect: auth2.isSignedIn.get(), 
        loaded: true 
       }) 
      }) 
     }) 
    } 
    componentDidMount() { 
     gapi.signin2.render('my-signin2', { 
      'scope': 'profile email', 
      'width': 300, 
      'height': 50, 
      'longtitle': true, 
      'theme': 'dark', 
      'onsuccess': this.onSignIn, 
     }); 
    } 
    updateRedirect() { 
     this.setState({ 
      redirect: true 
     }); 
    } 
    render() { 
     if(!this.state.loaded) { 
      return null 
     } 
     return this.state.redirect ? <Redirect to='/options' /> : <SignIn />; 
    } 
} 

class SignIn extends React.Component{ 
    render() { 
     return (
      <div> 
       <AppBar title="Pliny" showMenuIconButton={false} zDepth={2} /> 
       <div id="my-signin2"></div> 
      </div> 
     ) 
    } 
} 

だから今、<SignIn />コンポーネントは、認証要求が終了しており、ユーザーがリダイレクトされていない後までレンダリングされません。

Answer 2

を表示あなたはcomponentWillMountでthis.setStateと呼ばれたようです。名前が示すように、コンポーネントはその時点ではまだマウントされていないため、エラーが発生します。