【发布时间】：2020-10-25 04:00:03
【问题描述】：
我构建了一个确认组件来显示来自我的服务器的用户是否通过注册注册的信息：
将通过 react 显示的结果是：
a) 通过点击我发送的确认电子邮件中的链接成功验证了他们的帐户
b) 帐户已经过验证
c) 无法找到此令牌的用户
乍一看，我认为它有效，但我注意到两件我认为与错误有关的事情：
一个是错误：
警告：无法对未安装的组件执行 React 状态更新。 这是一个空操作，但它表明您的应用程序中存在内存泄漏。 要修复，请取消 useEffect 中的所有订阅和异步任务 清理功能。
此外，尽管使用了 switch 语句，但还是会挂载否定组件而不是成功组件？我正在使用 break 关键字，但不知何故，组件的渲染失败了。
这里是组件：
export function Confirmation({
match,
setError,
setResponseMessage,
resetUserAcoountVerified,
userHasBeenVerified,
error,
responseMessage,
accountNotVerified
}) {
// var [mountedComponent, setMountedComponent] = useState(false);
useEffect(() => {
let isSubscribed = true;
axios
.get(`/users/confirmation/${match.params.token}`)
.then(response => {
if (isSubscribed) {
if (response.status === 200) {
isSubscribed ? setResponseMessage(response.data.msg) : null;
}
}
})
.catch(function(error) {
if (error.response.status === 404) {
resetUserAcoountVerified();
setError(true);
isSubscribed ? setResponseMessage(error.response.data.msg) : null;
}
if (error.response.status === 400) {
userHasBeenVerified();
setError(true);
isSubscribed ? setResponseMessage(error.response.data.msg) : null;
}
});
return () => (isSubscribed = false);
}, []);
const isNull = value => typeof value === 'object' && !value;
console.log('error ', error);
console.log('accountNotVerified ', accountNotVerified);
let response;
switch (error) {
case accountNotVerified == true && error === false:
response = <Message positive header={responseMessage[0]} />;
break;
case accountNotVerified == false && error == true:
response = <Message negative header={responseMessage[0]} />;
break;
case isNull(accountNotVerified) && error:
response = <Message negative header={responseMessage[0]} />;
}
return <>{response}</>;
}
提前谢谢你！
更新
这是我基于 Evert 和 Peter 的善意贡献和洞察力得出的结论：
function isConfirmation() {
var [showApi, setShowApi] = useState(true);
function conirmationCall() {
return axios
.get(`/users/confirmation/${match.params.token}`)
.then(response => {
if (response.status === 200) {
return response;
}
})
.catch(function(error) {
if (error.response.status === 404) {
resetUserAcoountVerified();
setError(true);
setResponseMessage(error.response.data.msg);
return error;
}
if (error.response.status === 400) {
userHasBeenVerified();
setError(true);
setResponseMessage(error.response.data.msg);
return error;
}
});
}
useEffect(() => {
var mounted = true;
conirmationCall()
.then(status => {
() => setShowApi(prev => !prev);
console.log('status', status);
})
.catch(err => console.log(err));
return function() {
mounted = false;
};
}, []);
if (error) {
return showApi && <Message negative header={responseMessage[0]} />;
}
return showApi && <Message positive header={responseMessage[0]} />;
}
【问题讨论】：
-
哦，谢谢你，Sunil！我得去看看！
标签： reactjs axios use-effect