当我运行代码时，我在控制台中得到以下警告。
警告：无法对已卸载的组件执行React状态更新。这是一个no-op，但它表示应用程序中存在内存泄漏。要修复此问题，请取消useEffect清理函数中的所有订阅和异步任务。
这是我的密码：
const [userDetail, setUserDetail] = React.useState('');
const personalDetails = (user_id) => {
axios
.get(`http://localhost:3001/users/${user_id}`, { withCredentials: true })
.then((response) => {
const personalDetails = response.data;
setUserDetail(response.data);
})
.catch((error) => {
console.log(" error", error);
});
};
React.useEffect(() => {
if (user_id) {
personalDetails(user_id);
}
}, [user_id]);
如果删除useEffect调用，此错误将消失。这里怎么了？
这似乎是正在发生的事情：
setUserDetail，即使组件已被卸载。另一个问题是，您在使用它的效果之外定义了personalDetails。
我要做两个改变：
personalDetails函数的主体移动到效果中const [userDetail, setUserDetail] = React.useState("");
React.useEffect(() => {
if (user_id) {
let aborted = false;
axios
.get(`http://localhost:3001/users/${user_id}`, { withCredentials: true })
.then((response) => {
const personalDetails = response.data;
// Don't change state if the component has unmounted or
// if this effect is outdated
if (!aborted) {
setUserDetail(response.data);
}
})
.catch((error) => {
console.log(" error", error);
});
// The function returned here is called if the component unmounts
// or if the dependency list changes (user_id changes).
return () => (aborted = true);
}
}, [user_id]);
