错误：无法在未安装的组件上执行 React state 更新

Question

我需要你的帮助。 我有一个从 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 state 更新。 这是一个无操作，但它表明您的应用程序中存在 memory 泄漏。 要解决此问题，请取消 componentWillUnmount 方法中的所有订阅和异步任务。 在 InternalBlobProvider 中（由 PDFDownloadLink 创建）

有人能帮我吗？

---

我尝试了您指定的解决方案，但我仍然有同样的错误。 我的“loadPDF”值为真，这是因为我收到了来自 AXIOS 的响应。

如果在收到 AXIOS 的响应后，我等待几秒钟，然后用浏览器返回 go，我没有这个错误。

如果在 AXIOS 回复我 go 后用浏览器返回，我收到了这个错误。 这是因为在组件 PDF 内部有很多逻辑，可能需要一些时间。

我必须在 ComponentePDF 中工作吗？

Answer 1

发生的情况是 React 在组件卸载时尝试更新 state，因此我们需要在组件卸载时取消 Axios 请求。

为简单起见，我将从道具中解构 id。 此外，您可以查看 Axios 中的取消文档以了解如何操作，但我将为您提供以下示例：

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]);