핫 리로딩을 사용하여 반응 오류에서 루트 구성 요소의 렌더링 지연

Question

내 redux 저장소가 redux-persist을 사용하여 자동 완성 될 때까지 루트 앱 구성 요소를 지연해야합니다. 핫 다시로드 사용하지만이 코드를 사용하여 개발에 오류가 발생합니다 :

const App =() => (
    <MuiThemeProvider> 
     <Provider store = {store}> 
     {getRoutes(checkAuth, history)} 
     </Provider> 
    </MuiThemeProvider> 
    ) 

class AppProvider extends Component { 

    constructor() { 
    super() 
    this.state = { rehydrated: false } 
    } 

    componentWillMount() { 
    persistStore(store, {storage: localforage},() => { 
     this.setState({ rehydrated: true }) 
    }) 
    } 

    render() { 
    if (!this.state.rehydrated) { 
     return <div>Loading...</div> 
    } 
    return (
     <App /> 
    ) 
    } 
} 

ReactDOM.render(
    <AppProvider/>, 
    document.getElementById('app') 
) 

을 내가 그냥이, ​​그것은 작동을 변경하는 경우 (핫에서 오류가 다시로드 없음) :

const App =() => (
    <MuiThemeProvider> 
     <Provider store = {store}> 
     {getRoutes(checkAuth, history)} 
     </Provider> 
    </MuiThemeProvider> 
    ) 

ReactDOM.render(
    <App/>, 
    document.getElementById('app') 
) 

나는 프로세스를 사용하여 뭔가를 시도했다 .env.NODE_ENV가 '생산'또는 '개발'인지 확인하여 위의 코드 스 니펫을 조건부로 실행할 수 있도록합니다. 그러나 상태에 관계없이 구성 요소 스 니펫을 추가하면 어떤 이유로 인해 오류가 발생합니다. .env.NODE_ENV === 'development' 내가 ac에서 무언가를 바꿀 때 다음과 같은 오류가 발생합니다. HomeConatiner에서 렌더링 creationComplete 컴퍼넌트 :

warning.js:36 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of HomeContainer .

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of HomeContainer .(…)

Answer 1

난 당신이 componentDidMount 대신 componentWillMount에 persistStore 함수를 호출한다고 생각합니다.