时间戳

首页 > 解决方案 > 如何正确延迟渲染

reactjs - 如何正确延迟渲染

问题描述

//离线.js

import { offline } from '@redux-offline/redux-offline';
import offlineConfig from '@redux-offline/redux-offline/lib/defaults';

const config = params => ({
  ...offlineConfig,
  persistCallback: params.persistCallback
});

export default params => offline(config(params));

//App.js

class App extends Component {

  componentWillMount() {
    this.store = Reactotron.createStore(
      reducers,
      undefined,
      compose(
        applyMiddleware(ReduxThunk),
        offline({ persistCallback: this.startApp })
      )
    );
  }

  startApp = () => {
    if (this.store.getState().auth.loggedIn) {
      const resetAction = StackActions.reset({
        index: 0,
        actions: [NavigationActions.navigate({ routeName: 'summmary' })],
      });
      this.props.navigation.dispatch(resetAction);
    }
  }

  render() {
    return (
      <Provider store={this.store}>
        <MainNavigator />
      </Provider>
    );
  }
}

export default App;

我有 2 个屏幕summary，默认情况下将在login哪里渲染屏幕。login但是我添加了这个逻辑this.store.getState().auth.loggedIn来检查它是否为真然后将屏幕发送到summary但我得到了Cannot read property 'dispatch' of undefined

标签： reactjsreact-nativereact-reduxreact-navigationredux-offline

解决方案

导航道具可用于包装在 MainNavigator 中的 Screen 组件。

您正在尝试从导航器之外的 App 组件中使用它，因此它是未定义的。

在这种情况下，建议使用文档中描述的“不使用导航道具导航”方法： https ://reactnavigation.org/docs/en/navigating-without-navigation-prop.html

推荐阅读