当您触发 Promise 时，它可能需要几秒钟才能解决，届时用户可能已导航到您应用程序中的另一个位置。因此，当setState在未安装的组件上执行Promise resolves 并且您收到错误时 - 就像您的情况一样。这也可能导致内存泄漏。
这就是为什么最好将一些异步逻辑移出组件的原因。
否则，您将需要以某种方式取消您的 Promise。或者 - 作为最后的手段（这是一种反模式） - 您可以保留一个变量来检查组件是否仍然安装：
componentDidMount(){
this.mounted = true;
this.props.fetchData().then((response) => {
if(this.mounted) {
this.setState({ data: response })
}
})
}
componentWillUnmount(){
this.mounted = false;
}
我将再次强调这一点 - 这是一种反模式，但在您的情况下可能就足够了（就像他们对Formik实现所做的那样）。
GitHub上的类似讨论
编辑：
这可能是我如何使用Hooks解决同样的问题（只有 React）：
选项 A：
import React, { useState, useEffect } from "react";
export default function Page() {
const value = usePromise("https://something.com/api/");
return (
<p>{value ? value : "fetching data..."}</p>
);
}
function usePromise(url) {
const [value, setState] = useState(null);
useEffect(() => {
let isMounted = true; // track whether component is mounted
request.get(url)
.then(result => {
if (isMounted) {
setState(result);
}
});
return () => {
// clean up
isMounted = false;
};
}, []); // only on "didMount"
return value;
}
选项 B：或者，useRef它的行为类似于类的静态属性，这意味着当它的值发生变化时，它不会重新渲染组件：
function usePromise2(url) {
const isMounted = React.useRef(true)
const [value, setState] = useState(null);
useEffect(() => {
return () => {
isMounted.current = false;
};
}, []);
useEffect(() => {
request.get(url)
.then(result => {
if (isMounted.current) {
setState(result);
}
});
}, []);
return value;
}
// or extract it to custom hook:
function useIsMounted() {
const isMounted = React.useRef(true)
useEffect(() => {
return () => {
isMounted.current = false;
};
}, []);
return isMounted; // returning "isMounted.current" wouldn't work because we would return unmutable primitive
}
示例：https : //codesandbox.io/s/86n1wq2z8