错误 - 客户端/服务器不匹配:React,Redux,NextJS,Typescript和Styled Components

时间:2018-01-18 18:14:15

标签: reactjs typescript redux styled-components nextjs

我一直在尝试使用Next.js来处理SSR,Typescript和Styled Components的Counter示例。我在Github上有一个大多数工作的例子:https://github.com/dwaynelavon/nextscript-boilerplate

问题是我一直收到有关客户端/服务器不匹配的错误。 Warning: Text content did not match. Server: "1" Client: "0"。我无法弄清楚问题是什么。有什么建议吗?

// Index.tsx

type CounterDispatchProps = {
  addCount: () => any;
  startClock: () => any;
};

type CounterStateProps = {
  lastUpdate: number;
  light: boolean;
};

class Counter extends React.Component<
  CounterDispatchProps & CounterStateProps
> {
  private timer: number;
  constructor(props: CounterDispatchProps & CounterStateProps) {
    super(props);
  }
  static getInitialProps(props: any) {
    const store = props['store'];
    const isServer = props['isServer'];
    store.dispatch(serverRenderClock(isServer));
    store.dispatch(addCount());

    return { isServer };
  }

  componentDidMount() {
    this.timer = this.props.startClock();
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  render() {
    const props = {
      title: 'Index Page!',
      linkTo: '/other',
      lastUpdate: this.props.lastUpdate,
      light: this.props.light
    };
    return <Page {...props} />;
  }
}

const mapDispatchToProps = (dispatch: any) => {
  return {
    addCount: bindActionCreators(addCount, dispatch),
    startClock: bindActionCreators(startClock, dispatch)
 };
};

const mapStateToProps = (state: any) => {
  return {
    lastUpdate: state['lastUpdate'],
    light: state['light']
  };
};

export default withRedux(initStore, mapStateToProps, 
    mapDispatchToProps)(Counter);

以下是页面组件:

Interface PageProps {
  title: string;
  linkTo: string;
  lastUpdate: number;
  light: boolean;
}

const Page = ({ title, linkTo, lastUpdate, light }: PageProps) => {
  const clockProps = {
    lastUpdate,
    light
  };

  return (
    <div>
      <h1>{title}</h1>
      <Clock {...clockProps} />
      <AddCount />
      <nav>
        <Link href={linkTo}>
          <a>Navigate</a>
        </Link>
      </nav>
    </div>
  );
};

export default Page;

0 个答案:

没有答案