كيف يمكن حل خطأ "Maximum update depth exceeded" في React؟

السبب هو أن الدالة useEffect() يتم تنفيذها كل مرة يتم فيها تحديث حالة المكون today، وحيث أن الدالة useEffect() تحدد حالة المكون today ، فإن ذلك يؤدي إلى حلقة لا نهاية لها من التحديثات.

عليك القيام بالتالي:

• إضافة حالة المكون today إلى مصفوفة الاعتماديات dependencies الخاصة بالدالة useEffect() من أجل منع تنفيذ الدالة useEffect() كلما تم تحديث حالة المكون today.

• استخدام هوك useCallback() لإنشاء نسخة من دالة getToday() التي يمكن استخدامها خارج نطاق هوك useCallback().

import { useEffect, useState, useCallback } from 'react';
import { Col, Row } from 'react-bootstrap';
import moment from 'moment';

function Test() {
  const [today, setToday] = useState({});

  const getToday = useCallback(() => {
    const t = moment();

    return {
      time: t.format('hh:mm:ss a'),
      date: t.format('D/MMM/YYYY'),
    };
  }, []);

  useEffect(() => {
    setToday(getToday);
  }, [getToday]);

  return (
    <Row>
      <Col className='colTop'>{today?.date}</Col>
      <Col className='colTop' style={{ fontSize: '1.6rem', textAlign: 'center' }}>
        <h2>{today?.time}</h2>
      </Col>
    </Row>
  );
}

export default Test;

بتاريخ 14 دقائق مضت قال Mustafa Suleiman:

السبب هو أن الدالة useEffect() يتم تنفيذها كل مرة يتم فيها تحديث حالة المكون today، وحيث أن الدالة useEffect() تحدد حالة المكون today ، فإن ذلك يؤدي إلى حلقة لا نهاية لها من التحديثات.

عليك القيام بالتالي:

• إضافة حالة المكون today إلى مصفوفة الاعتماديات dependencies الخاصة بالدالة useEffect() من أجل منع تنفيذ الدالة useEffect() كلما تم تحديث حالة المكون today.
• استخدام الدالة useMemo() لتخزين نتيجة الدالة moment() لإعادة حساب نتيجة الدالة moment() فقط عند تغير قيمة مدخلاتها.

import React, { useEffect, useState, useMemo, useCallback } from 'react';
import {Col, Row} from 'react-bootstrap'
import moment from 'moment';

function Test() {
  const [today, setToday]= useState({});

  const getToday = useMemo(() => {
    const t = moment();

    return {
      time: t.format('hh:mm:ss a'),
      date: t.format('D/MMM/YYYY'),
    };
  }, []);

  useEffect(() => {
    setToday(getToday());
  }, [getToday]);

  return (
    <Row>
      <Col className='colTop'>{getToday().date}</Col>
      <Col className='colTop' style={{fontSize:'1.6rem',textAlign: "center"}}><h2>{getToday().time}</h2></Col>
    </Row>
  );
}

export default Test;

 

ظهر خطا يقول getToday is not a function at Test.js;

يشير إلى السطر الذي داخل <Col>{getToday().time}</Col>

استخدم هوك useCallback() لإنشاء نسخة من دالة getToday() التي يمكن استخدامها خارج نطاق هوك useCallback().

الكود سيكون كالتالي:

import { useEffect, useState, useCallback } from 'react';
import { Col, Row } from 'react-bootstrap';
import moment from 'moment';

function Test() {
  const [today, setToday] = useState({});

  const getToday = useCallback(() => {
    const t = moment();

    return {
      time: t.format('hh:mm:ss a'),
      date: t.format('D/MMM/YYYY'),
    };
  }, []);

  useEffect(() => {
    console.log(getToday);
    setToday(getToday);
  }, [getToday]);

  return (
    <Row>
      <Col className='colTop'>{today?.date}</Col>
      <Col className='colTop' style={{ fontSize: '1.6rem', textAlign: 'center' }}>
        <h2>{today?.time}</h2>
      </Col>
    </Row>
  );
}

export default Test;

بتاريخ 10 دقائق مضت قال Mustafa Suleiman:

استخدم هوك useCallback() لإنشاء نسخة من دالة getToday() التي يمكن استخدامها خارج نطاق هوك useCallback().

الكود سيكون كالتالي:

import { useEffect, useState, useCallback } from 'react';
import { Col, Row } from 'react-bootstrap';
import moment from 'moment';

function Test() {
  const [today, setToday] = useState({});

  const getToday = useCallback(() => {
    const t = moment();

    return {
      time: t.format('hh:mm:ss a'),
      date: t.format('D/MMM/YYYY'),
    };
  }, []);

  useEffect(() => {
    console.log(getToday);
    setToday(getToday);
  }, [getToday]);

  return (
    <Row>
      <Col className='colTop'>{today?.date}</Col>
      <Col className='colTop' style={{ fontSize: '1.6rem', textAlign: 'center' }}>
        <h2>{today?.time}</h2>
      </Col>
    </Row>
  );
}

export default Test;

 

عافاك الله , في جزئية أن الوقت ليس ديناميكيا : هل هناك من حل أضيفه على هذا الكود

بتاريخ 2 دقائق مضت قال يحيى بوحسي:

عافاك الله , في جزئية أن الوقت ليس ديناميكيا : هل هناك من حل أضيفه على هذا الكود

استاذ جزاك الله . لقد توصلت للحل : 

import { useEffect, useState, useCallback } from 'react';

import { Col, Row } from 'react-bootstrap';

import moment from 'moment';

function Test() {

  const [today, setToday] = useState({});

  const getToday=() => {

    const t = moment();

    return {

      time: t.format('hh:mm:ss a'),

      date: t.format('D/MMM/YYYY'),

    };

  };

  useEffect(()=>{

    const interval= setInterval(() => {

      setToday(getToday);

  }, 1000);

  return ()=>{

    clearInterval(interval)

  }

},[])

  return (

    <Row>

      <Col className='colTop'>{today.date}</Col>

      <Col className='colTop' style={{ fontSize: '1.6rem', textAlign: 'center' }}>

        <h2>{today.time}</h2>

      </Col>

    </Row>

  );

}

export default Test;