ما هو حل مشكلة warning maximum update depth exceeded. this can happen when a component calls setstate في خطاف useEffect في رياكت؟

رسالة الخطأ تشرح نفسها، تحدث المشكلة عندما يكون هنالك متغير حالة يتم تجاوز قيمته في كل render داخل الخطاف useEffect، وفي نفس الوقت يتم إعادة تنفيذ الشيفرة ما داخل الخطاف useEffect كل مرة يتم فيها تغيير قيمته. الأمر الذي يحدث حلقة لا نهائية من التنفيذات.

يمكنك تقييد عملية تحديث الحالة بناءا على الحالة السابقة:

useEffect(() => {
  const t = moment();

  setToday((prevToday) => {
    // تحديث الحالة بناءً على الحالة السابقة
    return {
      time: t.format('hh:mm:ss a'),
      date: t.format('D/MMM/YYYY'),
    };
  });
}, [moment(), timings]);

أيضا ان كان المتغير timings يتم تغييره هو الآخر بحسب قيمة today فستحتاج ازالته هو الآخر من مصفوفة الاعتماديات:

useEffect(() => {
  const t = moment();

  setToday((prevToday) => {
    // تحديث الحالة بناءً على الحالة السابقة
    return {
      time: t.format('hh:mm:ss a'),
      date: t.format('D/MMM/YYYY'),
    };
  });
}, [moment()]);

بتاريخ 2 دقائق مضت قال Adnane Kadri:

رسالة الخطأ تشرح نفسها، أين تحدث المشكلة عندما يكون هنالك متغير حالة يتم تجاوز قيمته في كل render داخل الخطاف useEffect، وفي نفس الوقت يتم إعادة تنفيذ الشيفرة ما داخل الخطاف useEffect كل مرة يتم فيها تغيير قيمته. الأمر الذي يحدث حلقة لا نهائية من التنفيذات.

يمكنك تقييد عملية تحديث الحالة بناءا على الحالة السابقة:

useEffect(() => {
  const t = moment();

  setToday((prevToday) => {
    // تحديث الحالة بناءً على الحالة السابقة
    return {
      time: t.format('hh:mm:ss a'),
      date: t.format('D/MMM/YYYY'),
    };
  });
}, [moment(), timings]);

أيضا ان كان المتغير timings يتم تغييره هو الآخر بحسب قيمة today فستحتاج ازالته هو الآخر من مصفوفة الاعتماديات:

useEffect(() => {
  const t = moment();

  setToday((prevToday) => {
    // تحديث الحالة بناءً على الحالة السابقة
    return {
      time: t.format('hh:mm:ss a'),
      date: t.format('D/MMM/YYYY'),
    };
  });
}, [moment()]);

شكرا جزيلا 

مشكلة تحذير maximum update depth exceeded تحدث عندما يستدعي المكون setstate أكثر من 100 مرة في دورة حياة واحدة، وذلك عندما يكون المكون مرتبطًا بحدث أو مكون آخر يطلق تغييرات بشكل متكرر.

وأنت تحصل على التحذير لأنك تستدعي setstate في كل مرة يتم فيها استدعاء useEffect، وذلك لأنك تربط useEffect بـ moment() و timings، حيث يتم تحديث moment() بشكل متكرر، مما يؤدي إلى استدعاء useEffect بشكل متكرر.

وكحل بسيط استخدم useCallback لإنشاء دالة ثابتة من moment() و timings، من أجل تقليل عدد المرات التي يتم فيها استدعاء useEffect.

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

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

  const memoizedMoment = useCallback(() => moment(), []);
  // const memoizedTimings = useCallback(() => timings, []);

  useEffect(() => {
    const t = memoizedMoment();
    setToday({
      time: t.format('hh:mm:ss a'),
      date: t.format('D/MMM/YYYY'),
    });
  }, [memoizedMoment]);

  return (
    <Row>
      <Col>{today.date}</Col>
      <Col>{today.time}</Col>
    </Row>
  );
}

export default Test;