我不明白useEffect在这里发生了什么

Question

如果在localStorage中找到token，我将尝试加载用户。当然，在我的代码中，我没有将true分配给isAuthenticated，但我的问题是，如果我执行以下操作。。。

const [isAuthenticated, setIsAuthenticated] = useState(false);
useEffect(() => {
let mounted = true;
setIsAuthenticated(false);
const loadUser = async () => {
await fetch('http://localhost:5000/api/auth', {
method: 'GET',
headers: {
'x-auth-token': localStorage.token,
},
});
if (!mounted) {
setIsAuthenticated(false);
}
};
loadUser();
return () => {
mounted = false;
};
}, []);

我不明白这个问题。。。警告：无法对未安装的组件执行React状态更新。这是一个非操作，但它表明应用程序中存在内存泄漏。若要修复此问题，请取消useEffect清理函数中的所有订阅和异步任务

然而，如果我要更改

if (!mounted) {
setIsAuthenticated(false);
}

至

if (!mounted) {
setIsAuthenticated(true);
}

我确实收到了这个警告，我只是想知道为什么会发生这种情况，这样我就知道如何在出现这种情况时妥善处理。

Answer 1

警告为：

警告：无法对未安装的组件执行React状态更新。

您可以调用状态设置器，但不能更改状态，因为这将导致重新渲染，但React无法重新渲染，因为组件已卸载，请参阅下面的代码：

const Working = () => {
const [value, setValue] = React.useState(true);
React.useEffect(() => {
//not changing the value
setTimeout(() => setValue(true), 100);
});
return `value is: ${value}`;
};
const Warning = () => {
const [value, setValue] = React.useState(true);
React.useEffect(() => {
//changing the value causes re render
//  but component was unmounted by App
setTimeout(() => setValue(false), 100);
});
return `value is: ${value}`;
};
const App = () => {
const [remount, setRemount] = React.useState(true);
const causeWarning = () => {
setRemount(false);
Promise.resolve(true)
.then(setRemount)
.then(() => setRemount(false));
};
return (
<div>
<button onClick={causeWarning}>cause warnig</button>
{remount && <Working />}
{remount && <Warning />}
</div>
);
};

当组件卸载时，最好不要调用状态设置程序：

if (mounted) {
setIsAuthenticated(false);
}

警告显示的部分：

这是一个非操作，但它表明应用程序中存在内存泄漏。

意味着您可以

Answer 2

你必须这样做

useEffect(() => {
let mounted = true;
setIsAuthenticated(false);
const loadUser = async () => {
await fetch('http://localhost:5000/api/auth', {
method: 'GET',
headers: {
'x-auth-token': localStorage.token,
},
}).then(()=> {
if (!mounted) {
setIsAuthenticated(true);
}
});
};
loadUser();
return () => {
mounted = false;
};
}, []);