ReactJS. تحذير: لا يمكن إجراء تحديث حالة رد الفعل على مكون غير مُركب. هذه ليست عملية ، لكنها تشير إلى مذكرة

تحذير. غير قادر على تحديث حالة رد الفعل لمكون غير مثبت. هذه ليست عملية ، ولكنها تشير إلى تسرب للذاكرة في التطبيق الخاص بك. لإصلاح ذلك ، قم بإلغاء جميع الاشتراكات والمهام غير المتزامنة في وظيفة تنظيف useEffect.

1. تعذر تنفيذ تحديث الحالة
2. مكون غير مثبت ؛
3. إلغاء جميع الاشتراكات والمهام غير المتزامنة
4. استخدم تأثير التنظيف

1. جميع المبرمجين المتفاعلين يعرفون ما هي الحالة (الحالة) وأن مثل هذا التحديث (setState) أيضًا. لن أكون ذلك.
2. . :
   1) ;
   2) ;
   3) ;
   — 3 . .
   
3. . - , : . , async/await — .
4. useEffect. return () => {} useEffect. , - , : .

الصفحة الرئيسية

معلومات عنا

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

import { MOVIE_DB_GET } from '../config';

const HomePage = () => {
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(MOVIE_DB_GET);
        const result = await response.json();
        console.log(result, 'result')
      } catch (e) {
        console.error(e.message)
      }
    };

    //  get-     
    fetchData();
  }, []);

  return (
    <main>
      <h2> </h2>
    </main>
  )
};

export default HomePage;

import React from 'react';

const AboutPage = () => {
  return (
    <main>
      <h2> </h2>
      <p>
                
      </p>
    </main>
  )
};

export default AboutPage;

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

import { MOVIE_DB_GET } from '../config';

const HomePage = () => {
  // movie - react-;
  // setMovie -   react-
  const [ movie, setMovie ] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(MOVIE_DB_GET);
        const result = await response.json();
        console.log(result, 'result');
        setMovie(result);
      } catch (e) {
        console.error(e.message)
      }
    };

    //       
    fetchData();
  }, []);

  // descriptionMovie -  ,  view,         movie

  return (
    <main>
      <h2> </h2>
      <p> </p>

      {
        movie ? descriptionMovie() : false
      }
    </main>
  )
};

export default HomePage;

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

import { MOVIE_DB_GET } from '../config';

const HomePage = () => {
  // movie - react-;
  // setMovie -   react-
  const [ movie, setMovie ] = useState(null);

  useEffect(() => {
    let cleanupFunction = false;
    const fetchData = async () => {
      try {
        const response = await fetch(MOVIE_DB_GET);
        const result = await response.json();
        console.log(result, 'result')

        //     ,    
        if(!cleanupFunction) setMovie(result);
      } catch (e) {
        console.error(e.message)
      }
    };

    fetchData();

    //   useEffect
    return () => cleanupFunction = true;
  }, []);

  // descriptionMovie -  ,  view,         movie

  return (
    <main>
      <h2> </h2>
      <p> </p>

      {
        movie ? descriptionMovie() : false
      }
    </main>
  )
};

export default HomePage;

• ميزات إلغاء تحميل المكون وتحديث الحالة
• جرب / اصطنع تفاعل البناء وغير متزامن / في انتظار عدم التزامن