Обновлено: я только что понял, что предупреждение относится к компоненту TextLayerInternal. Вероятно, это ваша ошибка. Остальное по-прежнему актуально, но, возможно, это не решит вашу проблему.

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

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

2) Регулируемая функция Lodashes имеет метод cancel. Вызовите cancel в componentWillUnmount и откажитесь от isComponentMounted. Отмена - это более «идиоматическая» реакция, чем введение нового свойства.

попробуйте заменить setDivSizeThrottleable на

this.setDivSizeThrottleable = throttle(
  () => {
    if (this.isComponentMounted) {
      this.setState({
        pdfWidth: this.pdfWrapper!.getBoundingClientRect().width - 5,
      });
    }
  },
  500,
  { leading: false, trailing: true }
);

To remove - Can't perform a React state update on an unmounted component warning, use componentDidMount method under a condition and make false that condition on componentWillUnmount method. For example : -

class Home extends Component {
  _isMounted = false;

  constructor(props) {
    super(props);

    this.state = {
      news: [],
    };
  }

  componentDidMount() {
    this._isMounted = true;

    ajaxVar
      .get('https://domain')
      .then(result => {
        if (this._isMounted) {
          this.setState({
            news: result.data.hits,
          });
        }
      });
  }

  componentWillUnmount() {
    this._isMounted = false;
  }

  render() {
    ...
  }
}

У меня было это предупреждение, возможно, из-за вызова setState из обработчика эффектов (это обсуждается в этих 3 вопросысвязанывместе).

Во всяком случае, обновление версии реакции удалило предупреждение.

Я знаю, что вы не используете историю, но в моем случае я использовал ловушку useHistory из модели React Router DOM, которая отключает компонент до того, как состояние сохраняется в моем провайдере контекста React.

Чтобы решить эту проблему, я использовал ловушку withRouter, встраивающую компонент, в моем случае export default withRouter(Login), и внутри компонента const Login = props => { ...; props.history.push("/dashboard"); .... Я также удалил другой props.history.push из компонента, например if (authorization.token) return props.history.push('/dashboard'), потому что это вызывает цикл из-за состояния authorization.

Альтернатива помещению нового элемента в история.

Вот конкретное решение Реагировать на хуки для

Ошибка

Warning: Can't perform a React state update on an unmounted component.

Решение

Вы можете объявить let isMounted = true внутри useEffect, который будет изменен в обратный вызов очистки, как только компонент будет размонтирован. Перед обновлением состояния вы теперь проверяете эту переменную условно:

useEffect(() => {
  let isMounted = true;               // note mutable flag
  someAsyncOperation().then(data => {
    if (isMounted) setState(data);    // add conditional check
  })
  return () => { isMounted = false }; // cleanup toggles value, if unmounted
}, []);                               // adjust dependencies to your needs

const Parent = () => {
  const [mounted, setMounted] = useState(true);
  return (
    <div>
      Parent:
      <button onClick = {() => setMounted(!mounted)}>
        {mounted ? "Unmount" : "Mount"} Child
      </button>
      {mounted && <Child />}
      <p>
        Unmount Child, while it is still loading. It won't set state later on,
        so no error is triggered.
      </p>
    </div>
  );
};

const Child = () => {
  const [state, setState] = useState("loading (4 sec)...");
  useEffect(() => {
    let isMounted = true;
    fetchData();
    return () => {
      isMounted = false;
    };

    // simulate some Web API fetching
    function fetchData() {
      setTimeout(() => {
        // drop "if (isMounted)" to trigger error again 
        // (take IDE, doesn't work with stack snippet)
        if (isMounted) setState("data fetched")
        else console.info("aborted setState on unmounted component")
      }, 4000);
    }
  }, []);

  return <div>Child: {state}</div>;
};

ReactDOM.render(<Parent />, document.getElementById("root"));

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js" integrity = "sha256-32Gmw5rBDXyMjg/73FgpukoTZdMrxuYW7tj8adbN8z4 = " crossorigin = "anonymous"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js" integrity = "sha256-bjQ42ac3EN0GqK40pC9gGi/YixvKyZ24qMP/9HiGW7w = " crossorigin = "anonymous"></script>
<div id = "root"></div>
<script>var { useReducer, useEffect, useState, useRef } = React</script>

Расширение: Custom useAsync Hook

Мы можем инкапсулировать весь шаблон в настраиваемый Hook, который автоматически прерывает асинхронные функции в случае, если компонент отключен или значения зависимостей изменились ранее:

function useAsync(asyncFn, onSuccess) {
  useEffect(() => {
    let isActive = true;
    asyncFn().then(data => {
      if (isActive) onSuccess(data);
    });
    return () => { isActive = false };
  }, [asyncFn, onSuccess]);
}

// custom Hook for automatic abortion on unmount or dependency change
// You might add onFailure for promise errors as well.
function useAsync(asyncFn, onSuccess) {
  useEffect(() => {
    let isActive = true;
    asyncFn().then(data => {
      if (isActive) onSuccess(data)
      else console.info("aborted setState on unmounted component")
    });
    return () => {
      isActive = false;
    };
  }, [asyncFn, onSuccess]);
}

const Child = () => {
  const [state, setState] = useState("loading (4 sec)...");
  useAsync(simulateFetchData, setState);
  return <div>Child: {state}</div>;
};

const Parent = () => {
  const [mounted, setMounted] = useState(true);
  return (
    <div>
      Parent:
      <button onClick = {() => setMounted(!mounted)}>
        {mounted ? "Unmount" : "Mount"} Child
      </button>
      {mounted && <Child />}
      <p>
        Unmount Child, while it is still loading. It won't set state later on,
        so no error is triggered.
      </p>
    </div>
  );
};

const simulateFetchData = () => new Promise(
  resolve => setTimeout(() => resolve("data fetched"), 4000));

ReactDOM.render(<Parent />, document.getElementById("root"));

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js" integrity = "sha256-32Gmw5rBDXyMjg/73FgpukoTZdMrxuYW7tj8adbN8z4 = " crossorigin = "anonymous"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js" integrity = "sha256-bjQ42ac3EN0GqK40pC9gGi/YixvKyZ24qMP/9HiGW7w = " crossorigin = "anonymous"></script>
<div id = "root"></div>
<script>var { useReducer, useEffect, useState, useRef } = React</script>

Подробнее об очистке эффектов: Чрезмерная реакция: полное руководство по использованию эффекта

Если вышеуказанные решения не работают, попробуйте это, и это сработает для меня:

componentWillUnmount() {
    // fix Warning: Can't perform a React state update on an unmounted component
    this.setState = (state,callback)=>{
        return;
    };
}

У меня была аналогичная проблема и я ее решил:

Я автоматически вводил пользователя в систему, отправляя действие на redux (размещение токена аутентификации в состоянии redux)

а затем я пытался показать сообщение с this.setState ({succ_message: "...") в моем компоненте.

Компонент выглядел пустым с той же ошибкой на консоли: «отключенный компонент» .. «утечка памяти» и т. д.

После того, как я прочитал ответ Уолтера в этой теме

Я заметил, что в таблице маршрутизации моего приложения маршрут моего компонента недействителен, если пользователь вошел в систему:

{!this.props.user.token &&
        <div>
            <Route path = "/register/:type" exact component = {MyComp} />                                             
        </div>
}

Я сделал Маршрут видимым независимо от того, существует токен или нет.

У меня была аналогичная проблема, спасибо, что @ ford04 мне помог.

Однако произошла другая ошибка.

NB. Я использую перехватчики ReactJS

ndex.js:1 Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.

What causes the error?

import {useHistory} from 'react-router-dom'

const History = useHistory()
if (true) {
  history.push('/new-route');
}
return (
  <>
    <render component />
  </>
)

Это не могло сработать, потому что, несмотря на то, что вы перенаправляете на новую страницу, все состояние и свойства обрабатываются в dom или просто рендеринг на предыдущую страницу не останавливается.

What solution I found

import {Redirect} from 'react-router-dom'

if (true) {
  return <redirect to = "/new-route" />
}
return (
  <>
    <render component />
  </>
)

Основываясь на ответе @ ford04, вот то же самое, заключенное в методе:

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

export function useEffectAsync( effectAsyncFun : ( isMounted: () => boolean ) => unknown, deps?: DependencyList ) {
    useEffect( () => {
        let isMounted = true;
        const _unused = effectAsyncFun( () => isMounted );
        return () => { isMounted = false; };
    }, deps );
} 

Использование:

const MyComponent : FC<{}> = (props) => {
    const [ asyncProp , setAsyncProp ] = useState( '' ) ;
    useEffectAsync( async ( isMounted ) =>
    {
        const someAsyncProp = await ... ;
        if ( isMounted() )
             setAsyncProp( someAsyncProp ) ;
    });
    return <div> ... ;
} ;

Если вы извлекаете данные из axios, а ошибка все еще возникает, просто заключите сеттер в условие

let isRendered = useRef(false);
useEffect(() => {
    isRendered = true;
    axios
        .get("/sample/api")
        .then(res => {
            if (isRendered) {
                setState(res.data);
            }
            return null;
        })
        .catch(err => console.info(err));
    return () => {
        isRendered = false;
    };
}, []);

В зависимости от того, как вы открываете свою веб-страницу, вы можете не вызывать монтирование. Например, использование <Link/> для возврата к странице, которая уже была смонтирована в виртуальной модели DOM, поэтому перехватывается требование данных из жизненного цикла componentDidMount.

Существует довольно распространенная ловушка под названием useIsMounted, которая решает эту проблему (для функциональных компонентов) ...

import { useRef, useEffect } from 'react';

export function useIsMounted() {
  const isMounted = useRef(false);

  useEffect(() => {
    isMounted.current = true;
    return () => isMounted.current = false;
  }, []);

  return isMounted;
}

затем в вашем функциональном компоненте

function Book() {
  const isMounted = useIsMounted();
  ...

  useEffect(() => {
    asyncOperation().then(data => {
      if (isMounted.current) { setState(data); }
    })
  });
  ...
}

Вдохновленный принятым ответом @ ford04, у меня был даже лучший подход к его решению, вместо того, чтобы использовать useEffect внутри useAsync, создать новую функцию, которая возвращает обратный вызов для componentWillUnmount:

function asyncRequest(asyncRequest, onSuccess, onError, onComplete) {
  let isMounted=true
  asyncRequest().then((data => isMounted ? onSuccess(data):null)).catch(onError).finally(onComplete)
  return () => {isMounted=false}
}

...

useEffect(()=>{
        return asyncRequest(()=>someAsyncTask(arg), response=> {
            setSomeState(response)
        },onError, onComplete)
    },[])

Вдохновленный ответом @ ford04, я использую этот хук, который также принимает обратные вызовы для успеха, ошибок и, наконец, abortFn:

export const useAsync = (
        asyncFn, 
        onSuccess = false, 
        onError = false, 
        onFinally = false, 
        abortFn = false
    ) => {

    useEffect(() => {
        let isMounted = true;
        const run = async () => {
            try{
                let data = await asyncFn()
                if (isMounted && onSuccess) onSuccess(data)
            } catch(error) {
                if (isMounted && onError) onSuccess(error)
            } finally {
                if (isMounted && onFinally) onFinally()
            }
        }
        run()
        return () => {
            if (abortFn) abortFn()
            isMounted = false
        };
    }, [asyncFn, onSuccess])
}

Если asyncFn выполняет какую-то выборку из серверной части, часто имеет смысл прервать ее, когда компонент отключен (хотя не всегда, иногда, например, если вы загружаете некоторые данные в хранилище, вы также можете просто захотеть доделать, даже если компонент размонтирован)

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

Но написать отменяемый код на простом JS может быть очень сложно. Чтобы исправить это, я создал свою собственную библиотеку useAsyncEffect2 с настраиваемыми хуками, построенную на основе отменяемого обещания (c-обещание2) для выполнения отменяемого асинхронного кода для достижения его постепенной отмены. Все асинхронные этапы (обещания), в том числе глубокие, отменяются. Это означает, что запрос здесь будет автоматически прерван, если его родительский контекст будет отменен. Конечно, вместо запроса можно использовать любую другую асинхронную операцию.

• Демо useAsyncEffect с простым использованием useState (Живая демонстрация):

    import React, { useState } from "react";
    import { useAsyncEffect } from "use-async-effect2";
    import cpAxios from "cp-axios";
    
    function TestComponent({url}) {
      const [text, setText] = useState("");
    
      const cancel = useAsyncEffect(
        function* () {
          setText("fetching...");
          const json = (yield cpAxios(url)).data;
          setText(`Success: ${JSON.stringify(json)}`);
        },
        [url]
      );
    
      return (
        <div>
          <div>{text}</div>
          <button onClick = {cancel}>
            Cancel request
          </button>
        </div>
      );
    }

• useAsyncEffect Демо с использованием внутренних состояний (Живая демонстрация):

    import React from "react";
    import { useAsyncEffect } from "use-async-effect2";
    import cpAxios from "cp-axios";
    
    function TestComponent({ url, timeout }) {
      const [cancel, done, result, err] = useAsyncEffect(
        function* () {
          return (yield cpAxios(url).timeout(timeout)).data;
        },
        { states: true, deps: [url] }
      );
    
      return (
        <div>
          {done ? (err ? err.toString() : JSON.stringify(result)) : "loading..."}
          <button onClick = {cancel} disabled = {done}>
            Cancel async effect (abort request)
          </button>
        </div>
      );
    }

• Компонент класса с использованием декораторов (Живая демонстрация)

import React, { Component } from "react";
import { ReactComponent } from "c-promise2";
import cpAxios from "cp-axios";

@ReactComponent
class TestComponent extends Component {
  state = {
    text: ""
  };

  *componentDidMount(scope) {
    const { url, timeout } = this.props;
    const response = yield cpAxios(url).timeout(timeout);
    this.setState({ text: JSON.stringify(response.data, null, 2) });
  }

  render() {
    return (<div>{this.state.text}</div>);
  }
}

export default TestComponent;

Еще другие примеры:

• Запрос Axios с обработкой ошибок
• Получить погоду по координатам
• Живой поиск
• Приостановить и возобновить
• Захват прогресса

const handleClick = async (item: NavheadersType, index: number) => {
    const newNavHeaders = [...navheaders];
    if (item.url) {
      await router.push(item.url);   =>>>> line causing error (causing route to happen)
      // router.push(item.url);  =>>> coreect line
      newNavHeaders.forEach((item) => (item.active = false));
      newNavHeaders[index].active = true;
      setnavheaders([...newNavHeaders]);
    }
  };

Решение от @ ford04 не сработало для меня, и особенно, если вам нужно использовать isMounted в нескольких местах (например, множественное использованиеEffect), рекомендуется использоватьRef, как показано ниже:

1. Основные пакеты

"dependencies": 
{
  "react": "17.0.1",
}
"devDependencies": { 
  "typescript": "4.1.5",
}

2. Компонент My Hook

export const SubscriptionsView: React.FC = () => {
  const [data, setData] = useState<Subscription[]>();
  const isMounted = React.useRef(true);

  React.useEffect(() => {
    if (isMounted.current) {
      // fetch data
      // setData (fetch result)

      return () => {
        isMounted.current = false;
      };
    }
  }
});

Самое простое и компактное решение (с пояснением) рассматривается ниже как однострочное решение.

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

Приведенный выше пример useEffect() возвращает функцию обратного вызова, запускающую React, чтобы завершить отключенную часть своего жизненного цикла до обновления состояния.

Это очень упрощенное решение - все, что нужно. Кроме того, он также работает в отличие от вымышленного синтаксиса, предоставляемого @ ford04 и @sfletche. Между прочим, приведенный ниже фрагмент кода из @ ford04 является чисто воображаемым синтаксисом (@sfletche, @vinod, @guneetgstar и @ Дрю Кордано использовали тот же самый воображаемый синтаксис).

data => { <--- Вымышленный / воображаемый синтаксис

someAsyncOperation().then(data => {
    if (isMounted) setState(data);    // add conditional check
  })

Все мои линтеры и все линтеры моей команды не принимают его и сообщают о Uncaught SyntaxError: unexpected token: '=>'. Я удивлен, что никто не уловил воображаемый синтаксис. Может ли кто-нибудь, кто участвовал в этой цепочке вопросов, особенно среди проголосовавших, объяснить мне, как они заставили решения работать для них?

ОБНОВЛЕНИЕ НЕ ИСПОЛЬЗУЙТЕ МОЙ ОРИГИНАЛЬНЫЙ ОТВЕТ, ЭТО НЕ РАБОТАЕТ

Этот ответ был основан на использовании отменяемых обещаний и примечания в makecancelable, которое я перенес на использование хуков. Однако, похоже, это не отменяет цепочку async / await и даже cancelable-promiseне поддерживает отмену цепочки ожиданий.

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

Более того, было некоторое обещание с Bluebird, которое вводит отменяемые обещания, но оно не работает в Expo, или, по крайней мере, я не видел примера его работы в Expo.

принятый ответ - лучший. Поскольку я использую TypeScript, я адаптировал код с несколькими модификациями (я явно установил зависимости, поскольку неявные зависимости принятого ответа, по-видимому, дают цикл повторного рендеринга в моем приложении, добавлены и используют async / await вместо цепочки обещаний, передайте ref на смонтированный объект, чтобы цепочку async / await можно было отменить раньше, если это необходимо)

/**
 * This starts an async function and executes another function that performs
 * React state changes if the component is still mounted after the async
 * operation completes
 * @template T
 * @param {(mountedRef: React.MutableRefObject<boolean>) => Promise<T>} asyncFunction async function,
 *   it has a copy of the mounted ref so an await chain can be canceled earlier.
 * @param {(asyncResult: T) => void} onSuccess this gets executed after async
 *   function is resolved and the component is still mounted
 * @param {import("react").DependencyList} deps
 */
export function useAsyncSetEffect(asyncFunction, onSuccess, deps) {
  const mountedRef = useRef(false);
  useEffect(() => {
    mountedRef.current = true;
    (async () => {
      const x = await asyncFunction(mountedRef);
      if (mountedRef.current) {
        onSuccess(x);
      }
    })();
    return () => {
      mountedRef.current = false;
    };
  }, deps);
}

Оригинальный ответ

Поскольку у меня много разных операций с async, я использую пакет cancelable-promise, чтобы решить эту проблему с минимальными изменениями кода.

Предыдущий код:

useEffect(() => 
  (async () => {
    const bar = await fooAsync();
    setSomeState(bar);
  })(),
  []
);

Новый код:

import { cancelable } from "cancelable-promise";

...

useEffect(
  () => {
    const cancelablePromise = cancelable(async () => {
      const bar = await fooAsync();
      setSomeState(bar);
    })
    return () => cancelablePromise.cancel();
  },
  []
);

Вы также можете включить его в пользовательскую служебную функцию, подобную этой

/**
 * This wraps an async function in a cancelable promise
 * @param {() => PromiseLike<void>} asyncFunction
 * @param {React.DependencyList} deps
 */
export function useCancelableEffect(asyncFunction, deps) {
  useEffect(() => {
    const cancelablePromise = cancelable(asyncFunction());
    return () => cancelablePromise.cancel();
  }, deps);
}

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

if (!isScreenMounted.current) return;

Вот полный код

import React , {useRef} from 'react'
import { Text,StatusBar,SafeAreaView,ScrollView, StyleSheet } from 'react-native'
import BASEURL from '../constants/BaseURL';
const SearchScreen = () => {
    const isScreenMounted = useRef(true)
    useEffect(() => {
        return () =>  isScreenMounted.current = false
    },[])

    const ConvertFileSubmit = () => {
        if (!isScreenMounted.current) return;
         setUpLoading(true)
 
         var formdata = new FormData();
         var file = {
             uri: `file://${route.params.selectedfiles[0].uri}`,
             type:`${route.params.selectedfiles[0].minetype}`,
             name:`${route.params.selectedfiles[0].displayname}`,
         };
         
         formdata.append("file",file);
         
         fetch(`${BASEURL}/UploadFile`, {
             method: 'POST',
             body: formdata,
             redirect: 'manual'
         }).then(response => response.json())
         .then(result => {
             if (!isScreenMounted.current) return;
             setUpLoading(false)    
         }).catch(error => {
             console.info('error', error)
         });
     }

    return(
    <>
        <StatusBar barStyle = "dark-content" />
        <SafeAreaView>
            <ScrollView
            contentInsetAdjustmentBehavior = "automatic"
            style = {styles.scrollView}>
               <Text>Search Screen</Text>
            </ScrollView>
        </SafeAreaView>
    </>
    )
}

export default SearchScreen;


const styles = StyleSheet.create({
    scrollView: {
        backgroundColor:"red",
    },
    container:{
        flex:1,
        justifyContent:"center",
        alignItems:"center"
    }
})

Я решил эту проблему, предоставив все параметры, которые используются в хуке useEffect

Код сообщил об ошибке:

useEffect(() => {
    getDistrict({
      geonameid: countryId,
      subdistrict: level,
    }).then((res) => {
      ......
    });
  }, [countryId]);

Код после исправления:

useEffect(() => {
    getDistrict({
      geonameid: countryId,
      subdistrict: level,
    }).then((res) => {
      ......
    });
  }, [countryId,level]);

Как видите, проблемы решены после того, как я предоставил все параметры (включая параметр уровня), которые должны пройти.

Добавьте ссылку на компонент jsx, а затем проверьте, что он существует

function Book() {
  const ref = useRef();

  useEffect(() => {
    asyncOperation().then(data => {
      if (ref.current) setState(data);
    })
  });

  return <div ref = {ref}>content</div>
}

Проверка того, смонтирован ли компонент, на самом деле является анти-шаблоном согласно документации React. Решение для предупреждения setState заключается скорее в использовании AbortController.:

useEffect(() => {
  const abortController = new AbortController()   // creating an AbortController
  fetch(url, { signal: abortController.signal })  // passing the signal to the query
    .then(data => {
      setState(data)                              // if everything went well, set the state
    })
    .catch(error => {
      if (error.name === 'AbortError') return     // if the query has been aborted, do nothing
      throw error
    })
  
  return () => {
    abortController.abort()                       // stop the query by aborting on the AbortController on unmount
  }
}, [])

Для асинхронных операций, которые не основаны на Fetch API, все же должен быть способ отменить эти асинхронные операции, и вам лучше использовать их, чем просто проверять, смонтирован ли компонент. Если вы создаете свой собственный API, вы можете реализовать в нем API AbortController для его обработки.

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

Источник: https://medium.com/doctolib/react-stop-checking-if-your-component-is-mounted-3bb2568a4934

React уже удалил это предупреждение но вот лучшее решение (не только обходной путь)

useEffect(() => {
  const abortController = new AbortController()   // creating an AbortController
  fetch(url, { signal: abortController.signal })  // passing the signal to the query
    .then(data => {
      setState(data)                              // if everything went well, set the state
    })
    .catch(error => {
      if (error.name === 'AbortError') return     // if the query has been aborted, do nothing
      throw error
    })
  
  return () => {
    abortController.abort() 
  }
}, [])

"If there is a setter hook in your useEffect, return an cleanup function" - me

Проверьте свои функции useEffect(), у которых есть перехватчик установки setSomething(), и заставьте его возвращать функцию очистки в конце. Например:

useEffect(() => {
  ...
  setSomething(something); //
  ...
  return () => { }; // The cleanup function we have to add, it could be empty like this
}, [/*whatever deps or no deps at all*/]);  

У меня есть 2 решения этой ошибки:

1. возвращение:

Если вы используете hook и useEffect, поставьте конец return на useEffect.

useEffect(() => {
    window.addEventListener('mousemove', logMouseMove)
    return () => {
        window.removeEventListener('mousemove', logMouseMove)
    }
}, [])

2. componentWillUnmount:

Если вы используете componentDidMount, поставьте рядом с ним componentWillUnmount.

componentDidMount() { 
    window.addEventListener('mousemove', this.logMouseMove)
}

componentWillUnmount() {
    window.removeEventListener('mousemove', this.logMouseMove)
}