Question

我需要延迟root应用程序组件，直到我的redux使用redux-persist存储autoHydrates。但是使用此代码会导致使用热重新加载时的开发错误：

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')
)

我尝试使用process.env.NODE_ENV来检查它的'生产'或'开发'，以便我可以有条件地运行上面的代码片段，但是，由于某种原因，如果我添加有状态组件片段它仍然会导致错误在条件只运行如果process.env.NODE_ENV ==='开发' 当我在HomeConatiner中呈现的组件中更改某些内容时出现以下错误：

warning.js：36警告：React.createElement：   type不应为null，undefined，boolean或number。它应该是一个   string（用于DOM元素）或ReactClass（用于复合组件）。   检查HomeContainer的呈现方法。

未捕获错误：元素类型无效：需要一个字符串（for   内置组件）或类/函数（用于复合组件）   但得到了：未定义。检查HomeContainer。（...）
的渲染方法

Answer 1

我认为您应该在persistStore而不是componentDidMount中调用componentWillMount函数。

延迟React错误中的根组件的渲染与热重新加载

1 个答案: