Ошибка: не удается выполнить обновление состояния React для неустановленного компонента - PullRequest
Новая
       18

Ошибка: не удается выполнить обновление состояния React для неустановленного компонента

0 голосов
/ 21 апреля 2020

Мне нужна твоя помощь. У меня есть компонент, который извлекает данные из REST, и когда ответ возвращается, я включаю кнопку для PDF. 

const [pdf, setPDF] = useState(false);
const [utente, setUtente] = useState(null);

useEffect(() => {
    const url = ""
    axios.get(url, {
        params: {
            id: props.id
        }
    })
        .then((response) => {
            setPDF(true);
            setUtente(response);
        })
        .catch((err) => {
            setPDF(false);
            setUtente(null);
        });
    return () => {

    };
}, [props.id]);

return (
    <div className="container">
        {
        loadPDF
        ?
        <PDFDownloadLink document={<ComponentPDF utente={utente} />} fileName="utente.pdf">
            { <img src="pdf.png" title="PDF" alt="PDF" /> }
        </PDFDownloadLink>
         :
        <React.Fragment/>
        }
    </div >
);

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

Предупреждение. Невозможно выполнить обновление состояния React для отключенного компонента. Это неоперация, но она указывает на утечку памяти в вашем приложении. Чтобы исправить, отмените все подписки и асинхронные задачи в методе componentWillUnmount. в InternalBlobProvider (создан PDFDownloadLink)

может кто-нибудь мне помочь?

Я пробовал решения, которые вы указали, но у меня все еще та же ошибка. Мое значение «loadPDF» истинно, потому что я получил ответ от AX IOS.

Если после получения ответа от AX IOS я подожду несколько секунд, а затем я go вернусь с браузер, у меня нет этой ошибки.

, если после ответа AX IOS я go вернулся с браузером, я получил это и ошибку. это потому, что внутри Component PDF много логики c и, может быть, это займет некоторое время.

мне нужно работать в ComponentePDF?

1 Ответ

1 голос
/ 21 апреля 2020

Происходит то, что React пытается обновить состояние при размонтировании компонента, поэтому нам нужно отменить запрос Ax ios, когда компонент размонтируется.

Я собираюсь деструктурировать id из реквизита для простоты , Также вы можете проверить Аннулирование документов от Ax ios о том, как это сделать, но я оставлю вам следующий пример: 

useEffect(() => {
    const url = '';

    const CancelToken = axios.CancelToken;
    const source = CancelToken.source();

    axios
      .get(url, {
        params: { id },
        cancelToken: source.token,
      })
      .then((response) => {
        setPDF(true);
        setUtente(response);
      })
      .catch((err) => {
        setPDF(false);
        setUtente(null);
      });

    return () => source.cancel();
  }, [id]);
...