加载页面前调用了Next.js CompononentDidMount

xtupzzrd  于 2023-03-18  发布在  其他
关注(0)|答案(1)|浏览(234)

我在componentDidMount中将State show设置为true,并且在render中有一个if(this.state.show == true) return(components...),因此我希望在next.js完成页面加载时显示我的组件。

但由于某种原因,componentdidmount在页面显示之前被调用,并且组件动画在页面仍在加载时开始。因此,当页面实际显示时,用户在页面中间捕捉到我不想要的动画。

我的静态文件夹有很多图片,所以我猜下一步是加载它们,这就是为什么它需要很长时间,但为什么componentDidMount在页面完成加载之前被调用?(index.js的componentDidMount不是其呈现方法中的组件)
我禁用了组件的ssr,但它不起作用。我提到的页面没有从数据库中获取任何东西,也没有使用getInitialProps。它只是一个next.js页面,其呈现方法中包含组件。
顺便说一下,我注意到这种行为只有在生产,当应用程序实际部署到远程服务器,因为它需要时间来加载静态文件夹。

7hiiyaii

7hiiyaii1#

基本上,getInitialProps将在调用componentDidMount之前触发。
您可以通过其中的console.log来证明这一点,因为您知道getInitialPropsconsole.log将登录到您的终端。
要解释componentDidMount的意外行为,您需要:
在react组件树中,componentDidMount()在所有子组件都被挂载之后被触发,这意味着任何组件的componentDidMount()在其父组件被挂载之前被触发。
因此,如果您想测量DOM位置和大小等,使用子组件的componentDidMount()是一个不安全的地方/时间。
在您的情况下:要从100%宽度/高度组件中获得准确的阅读,进行此类测量的安全位置是顶部React组件的componentDidMount()内部。2 100%是相对于父组件/容器的宽度/高度。3因此,只能在父组件也已安装后进行测量。
Quoted From .
此外,如果您依赖于getInitialProps中的load事件,则应测量属性show并将其作为来自getInitialProps的属性发送,如下所示:

class Comp extends React.Component {
  async getInitialProps() {
    const loadableData = await ...loadingevent;
    return {
      show: !!loadableData.data //will return true when the data arrives
    }
  }
}

render(){
  const { show } = this.props;
  if(!show) {
    return <Loading />
  } else {
    return <SomethingElse />
  }
}

相关问题