Next.js数据加载问题

我面临Next.JS的问题并将初始道具读取到我的页面。我正在做几个（7-8）页面的应用程序。一个左边的菜单，一旦点击一个图标，路由器就会将用户推到合适的页面。然后，如果用户登录，则会加载页面和子组件。一切工作，因为我试图掩盖加载时间的加载组件，这样的：Next.js数据加载问题

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 />) 
}}

设计的目标是踢加载组件时，数据被读取。没有。我试图与之反应周期挂钩做到这一点，但似乎`

静态异步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 />) 
}}}

来源

2017-10-08 Koppany

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

来源

2017-10-09 14:11:36 elmasse

Next.js数据加载问题

回答

相关问题