اذهب إلى المحتوى
  • 0

window غير معرفة في next js

عبد النور محمد

السؤال

عند استخدام window في مكون الكلاس يحدث معي خطأ

import React, { Component } from 'react'

export default class index extends Component {
  
componentWillMount() {
    console.log('window.innerHeight', window.innerHeight);
}
  
    render() {
        return (
            <div>
.....
            </div>
        )
    }
}
Unhandled Rejection (ReferenceError): window is not defined

ما المشكلة ؟

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

يجب عليك تحريك الكود من ()componentWillMount الى ()componentDidMount كالآتي

componentDidMount() {
  console.log('window.innerHeight', window.innerHeight);
}

في Next.js ، الدالة ()componentDidMount يتم تنفيذها فقط عند العميل client حيث window و APIs المتصفح تكون متاحة.

على نفس المنوال دالة ()componentWillMount سيتم إزالته من React إصدار 17 ، لذلك من المحتمل أن يكون غير آمن للإستخدام في المستقبل القريب جداً

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

كما وضح عبدالمجيد أن الكود الذي يتم تنفيذه في المتصفح أي في ال client side يجب وضعه في ال lifecyle componentDidMount والبديل عن هذه ال lifecyle في ال function component ال useEffect ويتم تنفيذ المطلوب كالتالي

import React, {useEffect } from 'react';

function Index() {

  //componentDidMount and componentDidUpdate مشابه ل 
  useEffect(() => {
      console.log('window.innerHeight', window.innerHeight);
  },[]);

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...