在 React 错误中延迟根组件的渲染（带热重载）答案

【问题标题】：Delaying Render of root component in React errors w/ Hot Reloading在 React 错误中延迟根组件的渲染（带热重载）
【发布时间】：2017-01-18 01:05:27
【问题描述】：

我需要延迟根应用程序组件，直到我使用 redux-persist 的 redux 存储 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 来检查它是“生产”还是“开发”，因此我可以有条件地运行上面的代码 sn-ps，但是，由于某种原因，如果我添加有状态，它仍然会导致该错误组件 sn-p 仅在 process.env.NODE_ENV === 'development' 时运行 当我更改在 HomeConatiner 中呈现的组件中的某些内容时，出现以下错误：

warning.js:36 警告：React.createElement：类型不应为 null、未定义、布尔值或数字。它应该是一个字符串（用于 DOM 元素）或 ReactClass（用于复合组件）。检查HomeContainer的渲染方法。

未捕获的错误：元素类型无效：应为字符串（对于内置组件）或类/函数（用于复合组件）但得到：未定义。检查HomeContainer.(…)的渲染方法

【问题讨论】：

标签： reactjs redux react-redux webpack-hmr

【解决方案1】：

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

【讨论】：