too many renders

مروان محمود3 · 30 أغسطس 2021

عندما اقوم بتنفيذ هذا الكود ياتيني رسالة خطأ

Too many re-renders. React limits the number of renders to prevent an infinite loop

import React,{useState,useEffect} from 'react';
import axios from 'axios'
const Textview=({id})=>{
  const [label,setLabel]=useState("");
  useEffect(()=>{
  	axios.get("/api/"+id+"/label")
    .then(res=>setLabel(res.data))
  })
return(	
	<div>
  		<h1> {label}</h1>
	</div>
)

}
export default Textview

شرف الدين حفني · 30 أغسطس 2021

سبب المشكلة أنك لا تضع parameters في الخانة الثانية من دالة الuseEffect مما يجعلها تعمل في كل مرة يحدث تغيير للstate

وفي نفس الوقت عندما تعمل الدالة فإنها تقوم بتغيير الstate فبالتالي تعمل مرة أخرى إلى ما لا نهاية, الحل أن تضع مصفوفة بها المتغيرات التى تعتمد عليها دالة الuseEffect, وإن كان لا يوجد متغيرات تعتمد عليها فلتمرر مصفوفة فارغة كما في الشكل التالي

 useEffect(()=>{
  	axios.get("/api/"+id+"/label")
    .then(res=>setLabel(res.data),[])
  })

Salah Eddin Beriani2 · 30 أغسطس 2021

لقد قمت بأنشاء حلقة متكررة لا متناهية جعلت المكون في حالة تشغيل بلا توقف وهذا بسبب سوء استخدام useeffect في حالتك لأنه يوجد عدة طرق لاستخدام useeffect والاولى هي

useEffect(() => {
...
});

في الاستخدام فوق useeffect ستشتغل عند كل تغيير لأي حالة مرتبطة بالمكون والحالة الثانية هي

useEffect(() => {
...
}, []);

إضافة قائمة المعايير وتركها فارغة يعني أن useeffetc ستشتغل مرة واحدة وهي عندما يركب المكون ال dom أما الحالة الثالثة وهي اضافة معيار لقائمة المعايير

  const [label,setLabel]=useState("");


useEffect(() => {
....
}, [label]);

وهذه الحالة تخبر useeffect أن تشتغل فقط في حالة تغير المعيار المضمن في قائمة المعايير والان وقد تكلمنا عن الحالات الثلاثة ستجد أن الاستخدام المناسب لك هو الحالة الثانية

too many renders

السؤال

مروان محمود3

2 أجوبة على هذا السؤال

Recommended Posts

شرف الدين حفني

Salah Eddin Beriani2

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية