useEffect تحذير في react

Rayden Storm · 24 فبراير 2021

لماذا احصل على هذا التحذير من react

./src/components/Posts.js
Line 23:  React Hook useEffect has a missing dependency: 'getPosts'.
Either include it or remove the dependency array  react-hooks/exhaustive-deps

وهذا هو الكود

import React from 'react';
import axios from 'axios';

export default function Users() {
  const getPosts = () => {
    axios
      .get('http://localhost:4000/posts')
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });
  };
  useEffect(() => {
    getPosts();
  }, []);

  return <div>posts</div>;
}

Salah Eddin Beriani2 · 24 فبراير 2021

في الحقيقة هذا ليس تحذير من react بل هو تحذير من eslint-plugin-react-hooks و eslint في هذه الحالة يريدك ان تضع getPosts كمعيار للخطاف useEffect هكذا

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

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

import React from 'react';
import axios from 'axios';

export default function Users() {

  useEffect(() => {
   const getPosts = () => {
    axios
      .get('http://localhost:4000/posts')
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });
  };
    getPosts();
  }, []);

  return <div>posts</div>;
}

Yomna Raouf · 24 فبراير 2021

إذا كنت لا تستخدم الدالة getPosts في أي مكان آخر خارج ال effect يمكنك ببساطة نقله إلى داخل ال effect لتجنب هذا التحذير، ليصبح الكود كما يلي:

import React from 'react';
import axios from 'axios';

export default function Users() {
  
  useEffect(() => {
    const getPosts = () => {
    axios
      .get('http://localhost:4000/posts')
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });
  };
    
    getPosts();
  }, []);

  return <div>posts</div>;
}

أو يمكنك ضبطها مباشرةً على أنها دالة رد النداء الخاصة ب useEffect كما يلي:

useEffect(getPosts, [])

useEffect تحذير في react

السؤال

Rayden Storm

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

Recommended Posts

Salah Eddin Beriani2

Yomna Raouf

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية