Question

我遇到了Next.JS的问题，并在我的网页上获取了初始道具。我正在使用几个（7-8）页面进行应用程序。在左侧菜单中，一旦点击了图标，路由器就会将用户推送到正确的页面。然后，如果用户已登录，则加载页面和子组件。一切正常，因为我试图用加载组件来覆盖加载时间，如下所示：

  render() {

if (this.props.data !== undefined) {
  return (<Provider store={store}><Main info={this.props.data}  path={this.props.url.pathname} user={this.props.user} token={this.props.token} /></Provider>)
} else {
  return (<Loading />)
}}

设计目标是在获取数据时启动加载组件。不是之后。我试图用React生命周期钩子来做，但似乎是`

static async getInitialProps（{req}）

来到一切之前。看看整个代码

export default class Component extends React.Component {

static async getInitialProps({req}) {
const authProps = await getAuthProps(req, 
'url')
return authProps;
  }

  componentDidMount() {
if (this.props.data === undefined) {
  Router.push('/login')
}
  }

  render() {

if (this.props.data !== undefined) {
  return (<Provider store={store}><Main info={this.props.data}  path={this.props.url.pathname} user={this.props.user} token={this.props.token} /></Provider>)
} else {
  return (<Loading />)
}}}

Answer 1

在呈现Page组件时调用

getInitalProps。您不应该在任何其他组件中使用它，因为它不起作用。这不是React Lifecycle的一部分，而是Next的实现。我相信你想做的只是获取数据并测量其加载时间。如果是这样，那么使用componentDidMount就足够了。

Next.js数据加载问题

1 个答案: