リアクタ・ルータ4非同期レンダリング

Question

リダイレクト（Auth）のリアクタ・ルータ4のガイドに従っています。私はajaxが返す約束事に基づいてレンダリングに問題があります。私は約束の中の私のレンダリングがなぜ返されていないのか分かりません。誰かが私を正しい方向に向けることができますか？約束は値を返すことができないため

import React from 'react'; 
import { 
    Route, 
    Redirect, 
    withRouter 
} from 'react-router-dom'; 
import HeaderContainer from '../containers/HeaderContainer'; 

const PrivateRoute = ({ component: Component, ...props }) => { 

    const validated = (rest) => { 
    props.fetchUser() 
    .then(() => { 
     return (
     <div> 
      <HeaderContainer /> 
      <Component {...rest}/> 
     </div> 
    ) 
    }) 
    .catch(()=> { 
     return (
     <Redirect to={{ 
      pathname: '/signin', 
      state: { from: props.location } 
     }}/> 
    ) 
    } 
    ); 
    } 

    return (
    <Route {...props} render={rest => { 
     return (
     <div> 
      { validated(rest) } 
     </div> 
    ) 
    }}/> 
) 
} 

export default withRouter(PrivateRoute); 

私のルートは、この

const Root = ({ store }) => { 
    return (
    <Provider store={ store }> 
     <BrowserRouter onUpdate={() => window.scrollTo(0, 0)}> 
      <div className="root"> 
      <Switch> 
       <Route exact path="/signin" component={SignInContainer}/> 
       <PrivateRouteContainer exact path="/" component={HomePageContainer} /> 
      </Switch> 
      </div> 
     </BrowserRouter> 
    </Provider> 
) 
}; 

Answer 1

ザッツのように見える、それが唯一の約束を返します。代わりにコールバックを実行します。 Here is some explanation.

あなたは多少このようにあなたのコードを並べ替えることができます：約束は、それだけの状態で新しいデータで再レンダリングをトリガーするコールバックを実行し、何も返さない

class PrivateRoute extends React.Component { 
    constructor(props){ 
    super(props); 
    this.state = { 
     isFetching: true, 
     isSuccess: null, 
    }; 
    } 

    componentDidMount() { 
    this.props.fetchUser() 
     .then(() => { 
     this.setState({ isFetching: false, isSuccess: true }); 
     }) 
     .catch(()=> { 
     this.setState({ isFetching: false, isSuccess: false }); 
     }); 
    } 

    render() { 
    const { isFetching, isSuccess } = this.state;  
    return (
     <Route {...this.props} render={rest => { 
     const success = (
      <div> 
      <HeaderContainer /> 
      <Component {...rest}/> 
      </div> 
     ); 

     const error = (
      <Redirect to={{ 
      pathname: '/signin', 
      state: { from: this.props.location } 
      }}/> 
     ); 

     if(isFetching) { 
      return null; 
     } 

     return isSuccess ? success : error; 
     }}/> 
    ) 
    } 
} 

注意してください。