{"id":300526,"date":"2020-03-22T09:00:14","date_gmt":"2020-03-22T09:00:14","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=300526"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=300526","title":{"rendered":"ReactJS. Warning: Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memo"},"content":{"rendered":"\n
\u0414\u043e\u0431\u0440\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u0443\u0442\u043e\u043a, \u0425\u0430\u0431\u0440!<\/p>\n

\u0412\u0441\u0435 reactjs<\/a> \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438, \u043a\u0442\u043e \u0438\u043c\u0435\u0435\u0442 \u0434\u0435\u043b\u043e \u0441 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c\u044e \u043c\u0435\u0436\u0434\u0443 \u0431\u044d\u043a\u043e\u043c \u0438 \u0444\u0440\u043e\u043d\u0442\u043e\u043c \u0440\u0430\u043d\u043e \u0438\u043b\u0438 \u043f\u043e\u0437\u0434\u043d\u043e \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u044e\u0442\u0441\u044f, \u0438\u043b\u0438 \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u043b\u0438\u0441\u044c, \u0438\u043b\u0438 \u0432\u0441\u0442\u0440\u0435\u0442\u044f\u0442\u0441\u044f \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u043e\u0448\u0438\u0431\u043a\u043e\u0439:
<\/p>\n

\u0415\u0441\u043b\u0438 \u0434\u043e\u0441\u043b\u043e\u0432\u043d\u043e, \u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0442\u0430\u043a: <\/p>\n

\u041f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0435. \u041d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f React \u0434\u043b\u044f \u043d\u0435\u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u042d\u0442\u043e \u043d\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f, \u043d\u043e \u043e\u043d\u0430 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0430 \u0443\u0442\u0435\u0447\u043a\u0443 \u043f\u0430\u043c\u044f\u0442\u0438 \u0432 \u0432\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438. \u0427\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c, \u043e\u0442\u043c\u0435\u043d\u0438\u0442\u0435 \u0432\u0441\u0435 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438 \u0438 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043e\u0447\u0438\u0441\u0442\u043a\u0438 useEffect.<\/p><\/blockquote>\n

\u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0432\u0441\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e, \u043d\u0443\u0436\u043d\u043e \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u043b\u043e\u0432\u043e\u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u044f:<\/p>\n

    \n
  1. \u041d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f<\/b><\/li>\n
  2. \u043d\u0435\u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430;<\/b><\/li>\n
  3. \u043e\u0442\u043c\u0435\u043d\u0438\u0442\u0435 \u0432\u0441\u0435 \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438 \u0438 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438<\/b><\/li>\n
  4. \u043e\u0447\u0438\u0441\u0442\u043a\u0438 useEffect<\/b><\/li>\n<\/ol>\n

    \u0412 \u043e\u0441\u043d\u043e\u0432\u0435 \u0445\u0443\u043a\u0438. GO \u0432 \u043f\u043e\u0434 \u043a\u0430\u0442!
    <\/a>
    \u0418\u0442\u0430\u043a:<\/p>\n

      \n
    1. \u0412\u0441\u0435 reactjs \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u044b \u0437\u043d\u0430\u044e\u0442 \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435<\/a> (state) \u0438 \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435(setState) \u0442\u043e\u0436\u0435. \u042f \u043d\u0435 \u0431\u0443\u0434\u0443 \u044d\u0442\u043e\u043c.<\/li>\n
    2. \u041d\u0435\u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. \u0423\u0447\u0438\u0442\u044b\u0432\u0430\u044f \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u043e\u0448\u0438\u0431\u043a\u0438 \u043f\u0435\u0440\u0432\u043e\u0435 \u0447\u0442\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 \u0443\u043c:
      1) \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0435\u0442;
      2) \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043d\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043b\u0438;
      3) \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043b\u0441\u044f;
      \u041d\u0430\u0448 \u0441\u043b\u0443\u0447\u0430\u0439 \u2014 3 \u043f\u0443\u043d\u043a\u0442. \u0411\u0435\u0437 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439. <\/li>\n
    3. \u041f\u043e\u0434\u043f\u0438\u0441\u043a\u0438 \u0438 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435 \u0437\u0430\u0434\u0430\u0447\u0438. \u0422\u043e \u0435\u0441\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0447\u0442\u043e-\u0442\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440: \u0438\u0437\u043c\u0435\u043d\u044f\u044e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435. \u0427\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u043c\u043e \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0445 \u0437\u0430\u0434\u0430\u0447, \u0442\u043e \u0442\u0443\u0442 \u0441\u0440\u0430\u0437\u0443 \u043d\u0430 \u0443\u043c \u0431\u0440\u043e\u0441\u0430\u0435\u0442\u0441\u044f async\/await \u2014 \u044d\u0442\u043e \u043d\u0430\u0448 \u0441\u043f\u043e\u0441\u043e\u0431 \u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0441 \u0431\u044d\u043a\u043e\u043c \u0432 \u043f\u043e\u0431\u043e\u0447\u043d\u043e\u043c \u044d\u0444\u0444\u0435\u043a\u0442\u0435.<\/li>\n
    4. \u041e\u0447\u0438\u0441\u0442\u043a\u0430 useEffect<\/a>. \u042f \u0434\u0443\u043c\u0430\u044e \u0432\u0441\u0435 \u0437\u043d\u0430\u044e\u0442 \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 return () => {} \u0432 useEffect<\/a>. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u0438 \u043a\u0430\u043a\u0438\u0435-\u043b\u0438\u0431\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0432 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u043f\u0440\u0438 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440: \u0437\u0430\u043f\u0440\u0435\u0442\u0438\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435. <\/li>\n<\/ol>\n

      \u0412\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043c \u043e\u0448\u0438\u0431\u043a\u0443:<\/p>\n

      \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u043c\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0441\u0430\u0439\u0442 \u0441 \u043f\u043e\u0434\u0433\u0440\u0443\u0437\u043a\u043e\u0439 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0444\u0438\u043b\u044c\u043c\u043e\u0432 (\u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0443\u0433\u043b\u0443\u0431\u043b\u044f\u0442\u044c\u0441\u044f \u0432 API moviedb<\/a>, \u0430 \u0432\u043e\u0437\u044c\u043c\u0435\u043c \u0437\u0430 \u043e\u0441\u043d\u043e\u0432\u0443 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0439 \u0444\u0438\u043b\u044c\u043c). \u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0434\u0432\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0438: <\/p>\n

      \u0414\u043e\u043c\u043e\u0439<\/b><\/p>\n
      <\/div>\n<\/div>\n
      \u041e \u043d\u0430\u0441<\/b><\/p>\n
      <\/div>\n<\/div>\n

      \u0421\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u043e\u0431\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0432 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0432 header. \u041d\u0430 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0435 (\u00ab\u0414\u043e\u043c\u043e\u0439\u00bb) \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0441 \u0431\u044d\u043a\u043e\u043c \u0434\u043b\u044f \u043f\u043e\u0434\u0433\u0440\u0443\u0437\u043a\u0438 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u0444\u0438\u043b\u044c\u043c\u0435. <\/p>\n

      \/src\/Pages\/HomePage.js<\/i> <\/p>\n

      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)       }     };      \/\/ \u041f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043c get-\u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c \u0444\u0438\u043b\u044c\u043c\u0435     fetchData();   }, []);    return (     <main>       <h2>\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430<\/h2>     <\/main>   ) };  export default HomePage; <\/code><\/pre>\n
        \/src\/Pages\/AboutPage.js<\/i><\/p>\n
      import React from 'react';  const AboutPage = () => {   return (     <main>       <h2>\u041e \u043d\u0430\u0441<\/h2>       <p>          \u041d\u0435\u043a\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442             <\/p>     <\/main>   ) };  export default AboutPage; <\/code><\/pre>\n
        \u0414\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0434\u043b\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0430:<\/p>\n
        \/src\/Pages\/HomePage.js<\/i><\/p>\n
      import React, { useState, useEffect } from 'react';  import { MOVIE_DB_GET } from '..\/config';  const HomePage = () => {   \/\/ movie - react-\u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435;   \/\/ setMovie - \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f react-\u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f   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)       }     };      \/\/ \u041f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c \u0444\u0438\u043b\u044c\u043c\u0435     fetchData();   }, []);    \/\/ descriptionMovie - \u043d\u0435\u043a\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0430\u044f view, \u0442\u043e \u0435\u0441\u0442\u044c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0444\u0438\u043b\u044c\u043c\u0435 \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f movie    return (     <main>       <h2>\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430<\/h2>       <p>\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0444\u0438\u043b\u044c\u043c\u0430<\/p>        {         movie ? descriptionMovie() : false       }     <\/main>   ) };  export default HomePage; <\/code><\/pre>\n
        \u0412\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0434\u0435\u043c \u043e\u0448\u0438\u0431\u043a\u0443 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043f\u0443\u0442\u0435\u043c \u2014 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0438\u043c\u0441\u044f \u0441 \u043e\u0434\u043d\u043e\u0433\u043e \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430 \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0439, \u0442\u043e \u0435\u0441\u0442\u044c \u043d\u0430\u0445\u043e\u0434\u044f\u0441\u044c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0435 \u201c\u041e \u043d\u0430\u0441\u201d, \u043c\u044b \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0443 \u201c\u0414\u043e\u043c\u043e\u0439\u201d \u0438 \u043d\u0435\u0437\u0430\u043c\u0435\u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0432\u0435\u0440\u043d\u0435\u043c\u0441\u044f \u0441\u043d\u043e\u0432\u0430 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0443 \u201c\u041e \u043d\u0430\u0441\u201d \u0438 \u0432\u0443\u0430\u043b\u044f \u201cCan\u2019t perform \u2026..<\/b>\u201d. <\/p>\n
        \u0414\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043d\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0441\u0435\u0440\u0432\u0435\u0440 \u043d\u0435 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0441\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435 \u0442\u0430\u043a\u0438 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u0438 \u0437\u0430\u043f\u0440\u043e\u0441 \u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u044c\u043d\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u043c \u0437\u0430\u0434\u0430\u0447\u0430\u043c. \u041d\u043e \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0431\u044b\u0441\u0442\u0440\u043e\u0433\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0442\u0430 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u043a\u0443 \u201c\u041e \u043d\u0430\u0441\u201d, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u201c\u0414\u043e\u043c\u043e\u0439\u201d \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0441\u0431\u0440\u043e\u0441\u0438\u0442\u044c\u0441\u044f, \u043d\u043e \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0441\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0432\u0441\u0435 \u0436\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442 setMovie, \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435\u0442 \u0438 \u0432\u044b\u043a\u0438\u043d\u0435\u0442 \u043e\u0448\u0438\u0431\u043a\u0443. \u041e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0437\u0430\u043f\u0440\u0435\u0442\u0438\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u0440\u0438 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430:<\/p>\n
        \/src\/Pages\/HomePage.js<\/i><\/p>\n
      import React, { useState, useEffect } from 'react';  import { MOVIE_DB_GET } from '..\/config';  const HomePage = () => {   \/\/ movie - react-\u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435;   \/\/ setMovie - \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f react-\u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f   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')          \/\/ \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u0440\u0438 \u0443\u0441\u043b\u043e\u0432\u0438\u0438, \u0447\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0435 \u0440\u0430\u0437\u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d         if(!cleanupFunction) setMovie(result);       } catch (e) {         console.error(e.message)       }     };      fetchData();      \/\/ \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0447\u0438\u0441\u0442\u043a\u0438 useEffect     return () => cleanupFunction = true;   }, []);    \/\/ descriptionMovie - \u043d\u0435\u043a\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0449\u0430\u044f view, \u0442\u043e \u0435\u0441\u0442\u044c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0444\u0438\u043b\u044c\u043c\u0435 \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f movie    return (     <main>       <h2>\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430<\/h2>       <p>\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0444\u0438\u043b\u044c\u043c\u0430<\/p>        {         movie ? descriptionMovie() : false       }     <\/main>   ) };  export default HomePage; <\/code><\/pre>\n
        \u0418\u0442\u043e\u0433\u043e:  <\/p>\n