Question

有一个非常基本的页面，我将其用作TypeJS，React，Redux和其他诸如i18n，jest等东西的NextJS的引导程序，该页面在Nextjs 8中运行良好，但是当我将其更新到最新版本时（9）停止工作。

从某种意义上说，在状态改变时，页面一直保持“重新加载”或“重新呈现”的状态，从而停止工作。我的意思是，getInitialProps方法在客户端被调用（不涉及任何Link）

我有一个使用此渲染方法的自定义_app.tsx文件：

public render() {
  const { Component, pageProps } = this.props;
  const state = getOrCreateState();

  if (!IS_SERVER) {
    initLogger(state.settings.log);
    Component.logger = getLogger(Component.name);
  }

  const store = createStore(state, mainReducer);
  // tslint:disable-next-line: no-console
  console.log(`Rendering ${Component.name}`, store.getState());

  return (
    <>
      <Provider store={store}>
        <Component {...pageProps} />
      </Provider>
      <div
        dangerouslySetInnerHTML={{ __html: Main.getStoreScriptHtml(state) }}
      />
    </>
  );
}

（省略其余部分，因为它适用于v8，是正确的代码，但是使用render，您可以看到该组织）

唯一的是，在这种情况下（页面），Component像这样：

const IndexPage: PageComponent = function IndexPage() {
  const glitch = useSelector((state: State) => state.template.glitch);
  const dispatch = useDispatch();

  React.useEffect(initPage(glitch, dispatch), []);

  const DynamicTemplate = dynamic(
    () => import('../components/_template' as string).then(mod => mod.Template),
    { loading: () => <p>Loading...</p> }
  ) as React.ComponentType<Pick<TemplateProps, 'glitch'>>;

  return <DynamicTemplate glitch={glitch} />;
};

IndexPage.getInitialProps = async () => {
  /*
   * Example of Logger usage inside a component.
   * This mainly will be triggered in server side (unless navigating through <Link>)
   */
  IndexPage.logger.error('getInitialProps: error msg');
  IndexPage.logger.warn('getInitialProps: warn msg');
  IndexPage.logger.info('getInitialProps: info msg');
  IndexPage.logger.verbose('getInitialProps: verbose msg');
  IndexPage.logger.debug('getInitialProps: debug msg');
};

/**
 * Initialize the page when it's mounted, triggering a dispatch to change the state of the
 * glitch every few milliseconds, generating the "hacky" effect
 */
function initPage(initialGlitch: boolean, dispatch: ThunkDispatch) {
  return () => {
    const GLITCH_TIME = 200;
    const NORMAL_TIME = 1500;
    let glitch = initialGlitch;
    let timeoutHandler: number;

    function changeGlitch() {
      glitch = !glitch;
      dispatch(I18nSetLang(glitch ? 'es' : 'en'));
      dispatch(TemplateSetGlitchAction());
      timeoutHandler = setTimeout(
        changeGlitch,
        glitch ? GLITCH_TIME : NORMAL_TIME
      );
    }

    changeGlitch();

    /*
     * Example of Logger usage.
     * This mainly will be triggered in client side
     */
    IndexPage.logger.error('initPage: error msg');
    IndexPage.logger.warn('initPage: warn msg');
    IndexPage.logger.info('initPage: info msg');
    IndexPage.logger.verbose('initPage: verbose msg');
    IndexPage.logger.debug('initPage: debug msg');

    return () => clearTimeout(timeoutHandler);
  };
}

export default IndexPage;

所以，最主要的是，要测试React / Redux，这只是一个页面，该页面在true / false属性glitch之间切换以重新呈现Template组件（这也可以通过动态导入--btw完成，如果您删除了动态部分，则不会更改结果/错误）。

在nextjs8中，此方法运行良好，并且仅通过适当的更改重新呈现了Template状态...但是在nextjs9中，每次由于redux而导致状态更改时，整个页面都将重新呈现，包括致电getInitialProps ...

有什么想法吗？

Nextjs 9在客户端调用getInitialProps

0 个答案: