我一直在尝试使用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;