0

我需要使用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 检查它是“生产”还是“开发”，因此我可以有条件地运行上述代码片段，但是，由于某种原因，如果我在条件中添加有状态组件片段，它仍然会导致该错误仅在 process.env.NODE_ENV === 'development' 时运行 当我更改在 HomeConatiner 中呈现的组件中的某些内容时，我收到以下错误：

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

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

4

1 回答 1

0

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

于 2016-09-09T21:55:24.867 回答