Одной из наиболее распространенных проблем, которые вам необходимо решить в приложении React, является выборка внешних данных. В общем, это одна из первых задач, которую учишься решать, но большинство реализаций совершают одну простую ошибку, обновляют состояние размонтированного компонента .

Мы собираемся начать с очень простого примера, компонента Blog, который извлекает данные, связанные с сообщениями, показывает сообщение о загрузке, когда идет выборка, показывает ошибку в случае ошибок, а в другом случае отображает список пост.

const Blog = () => {
  const [posts, setPosts] = useState([]);
  const [status, setStatus] = useState('idle');
  const [error, setStatus] = useState(null);
useEffect(() => {
    const fetchData = async () => {
      setStatus('loading');
      try{
        setStatus('loading');
        const posts = await getAllPosts();
        setPosts(posts);
        setStatus('finished');
       } catch(e) {
         setStatus('error');
         setError(e);
       }
    }
  }, []);
if(status == 'error') return <p>Error while loading data</p>;
  if(status == 'loading') return <p>Loading...<p>;
  return <PostGrid posts={posts} />
};

Функция getAllPostsявляется ожидаемой асинхронной функцией, эта функция может занять много секунд, чтобы вернуться, и когда она возвращается, код пытается вызвать setPostsфункцию, но что произошло, когда компонент был размонтирован до этого момента?. Вы получаете предупреждение, потому что не можете установить состояние размонтированного компонента.

const posts = await getAllPosts();
setPosts(posts);  # Warning: Can't perform a React state update on an unmounted component.
setStatus('finished');

Ключевым моментом является установка состояния только в том случае, если компонент смонтирован, в этом случае вам нужно убедиться, что компонент смонтирован после getAllPostsвызова. Для этого мы собираемся использовать хук, который абстрагирует механизм проверки того, смонтирован ли текущий компонент.

const useIsMounted = () => {
  const isMounted = React.useRef(false);     // (1)
  React.useEffect(() => {
    isMounted.current = true;                // (2)
    return () => isMounted.current = false;  // (3)
  }, []);                                    // (3)
  return isMounted.current;
}

Теперь вы можете использовать его с исходным компонентом.

const Blog = () => {
  const [posts, setPosts] = useState([]);
  const [status, setStatus] = useState('idle');
  const [error, setStatus] = useState(null);
  const isMounted = useIsMounted();
useEffect(() => {
    const fetchData = async () => {
      setStatus('loading');
      try{
        const posts = await getAllPosts();
        if(isMounted) {
          setPosts(posts);                    // 1
          setStatus('finished');
        }
} catch(e) {
          if(isMounted) {
            setStatus('error');               // 2
            setError(e);
          }
       }
    }
  }, []);
if(status == 'error') return <p>Error while loading data</p>;
  if(status == 'finished') return <PostList posts={posts} />
  return <p>Loading...<p>;
};

Выводы

Попытка обновить состояние размонтированного компонента является очень распространенной проблемой в реагирующих приложениях, эта проблема обычно возникает при извлечении некоторых внешних данных, но та же проблема возникает при использовании любого асинхронного события, которое вызывает некоторые изменения в состоянии после его завершение.

Спасибо за прочтение!

Это все для этого поста, я надеюсь, что содержание вам понравилось, увидимся в следующем посте.

Больше контента на PlainEnglish.io . Подпишитесь на нашу бесплатную еженедельную рассылку . Следите за нами в Twitter и LinkedIn . Присоединяйтесь к нашему сообществу Discord .