Как правильно использовать очистку «Использовать» в React, чтобы избежать утечек памяти? ⇐ Javascript

[Anonymous]

не может выполнить обновление состояния на нерешенном компоненте. React не позволяет обновлять состояние для компонента, который больше не существует, поэтому появляется предупреждение. < /P>
Вот мой начальный код: < /p>

Код: Выделить всё

useEffect(() => {
const fetchData = async () => {
const res = await axios.get('/api/data');
setData(res.data); // Warning occurs if component unmounts before fetch finishes
};
fetchData();
}, []);
< /code>
Чтобы исправить это, я попытался использовать функцию очистки с AbortController. Мой обновленный код выглядит следующим образом: < /p>
useEffect(() => {
const controller = new AbortController();

const fetchData = async () => {
const res = await axios.get('/api/data', { signal: controller.signal });
setData(res.data);
};

fetchData();

return () => controller.abort(); // Is this the right way?
}, []);

Я ожидал, что возвращающий контроллер. abort () в очистке остановит запрос, если компонент не будет установлен до разрешения запроса. Однако предупреждение все еще появляется. Я что -то здесь упускаю? Является ли это правильным способом реализации функции очистки с помощью Axios, или мне следует по -разному обрабатывать отмену запроса?

Подробнее здесь: https://stackoverflow.com/questions/797 ... mory-leaks