我有一个登录组件，在用户登录后，我会继续将数据获取到我的本地存储中，如果登录成功，也就是说数据是真的，我想通过重定向用户另一个组件来更新我的组件，并用用户信息更新我的部件。现在登录成功，数据被传递到本地存储，但是，我没有被重定向，因为在下一个组件中，更新不会发生。在我的控制台中记录了一个逐渐减弱的错误，上面写着"；警告：无法对未安装的组件执行React状态更新。这是一个非操作，但它表明应用程序中存在内存泄漏。若要修复此问题，请取消useEffect清理函数中的所有订阅和异步任务">
这是我的登录组件
const user = JSON.parse(localStorage.getItem("user"));
const applicationForm = {
firstname: "",
lastname: "",
middlename: "",
gender: "",
dob: "",
phone: "",
email: "",
country: "",
crr_state: "",
institution: "",
fac_dept: "",
year_entry: "",
matric_number: "",
student_status: "",
edu_level: "",
applying_as: "",
team_members: "",
idea_grant: "",
category: "",
current_status: "",
area_of_interest: "",
formStatus: "Save and Continur later",
id: user ? user._id : "",
idea_summary: "",
video_url: "",
textChange: "Sumbit",
};
const NUICAppForm = () => {
const [formData, setFormData] = useState(applicationForm);
const [states, setStates] = useState(null);
const categoryList = [
"Renewable Energy Technologies",
"Satellite Communication Technologies",
"Drone Technologies",
"E-commerce Development",
"Smart AgricTech",
"Mobile Computing and 5G Networks",
];
const {
firstname,
lastname,
middlename,
gender,
dob,
phone,
email,
country,
crr_state,
institution,
fac_dept,
year_entry,
matric_number,
student_status,
edu_level,
current_status,
applying_as,
team_members: {
memberFullname1,
memberEmail1,
memberPhone1,
memberFullname2,
memberEmail2,
memberPhone2,
memberFullname3,
memberEmail3,
memberPhone3,
memberFullname4,
memberEmail4,
memberPhone4,
memberFullname5,
memberEmail5,
memberPhone5,
},
idea_grant,
category,
area_of_interest,
idea_summary,
video_url,
formStatus,
id,
textChange,
} = formData;
const clear = () => {
window.localStorage.clear();
};
const handleSubmit = (e) => {
e.preventDefault();
setFormData({ ...formData, textChange: "Submitting" });
axios
.post("https://i-next-backend.herokuapp.com/nuic/form/register", {
firstname,
lastname,
middlename,
gender,
dob,
phone,
email,
country,
crr_state,
institution,
fac_dept,
current_status,
year_entry,
matric_number,
student_status,
edu_level,
applying_as,
team_members: {
memberFullname1,
memberEmail1,
memberPhone1,
memberFullname2,
memberEmail2,
memberPhone2,
memberFullname3,
memberEmail3,
memberPhone3,
memberFullname4,
memberEmail4,
memberPhone4,
memberFullname5,
memberEmail5,
memberPhone5,
},
idea_grant,
category,
area_of_interest,
idea_summary,
formStatus,
video_url,
id: user._id,
})
.then((res) => {
setFormData({
...formData,
firstname: "",
lastname: "",
middlename: "",
gender: "",
dob: "",
phone: "",
email: "",
country: "",
crr_state: "",
current_status: "",
institution: "",
fac_dept: "",
year_entry: "",
matric_number: "",
student_status: "",
edu_level: "",
applying_as: "",
team_members: {
memberFullname1: "",
memberEmail1: "",
memberPhone1: "",
memberFullname2: "",
memberEmail2: "",
memberPhone2: "",
memberFullname3: "",
memberEmail3: "",
memberPhone3: "",
memberFullname4: "",
memberEmail4: "",
memberPhone4: "",
memberFullname5: "",
memberEmail5: "",
memberPhone5: "",
},
idea_grant: "",
category: "",
area_of_interest: "",
idea_summary: "",
video_url: "",
id,
textChange: "Application submitted for review ",
formStatus: "Pending application",
});
setFormData({
...formData,
textChange: "Application Submitted",
formStatus: "Application Pendig",
});
})
.catch((err) => {
setFormData({
...formData,
firstname: "",
lastname: "",
middlename: "",
gender: "",
dob: "",
phone: "",
email: "",
country: "",
crr_state: "",
current_status: "",
institution: "",
fac_dept: "",
year_entry: "",
matric_number: "",
student_status: "",
edu_level: "",
applyisng_as: "",
team_members: {
memberFullname1: "",
memberEmail1: "",
memberPhone1: "",
memberFullname2: "",
memberEmail2: "",
memberPhone2: "",
memberFullname3: "",
memberEmail3: "",
memberPhone3: "",
memberFullname4: "",
memberEmail4: "",
memberPhone4: "",
memberFullname5: "",
memberEmail5: "",
memberPhone5: "",
},
idea_grant: "",
category: "",
area_of_interest: "",
idea_summary: "",
video_url: "",
formStatus: "",
id,
});
setFormData({ ...formData, textChange: err.response.data.message });
});
};
useEffect(() => {
const fetchStates = async () => {
const result = await axios(
"https://nigerian-states-info.herokuapp.com/api/v1/states"
);
setStates(result.data.data);
};
fetchStates();
}, [user]);
正如你在上面的useEffect中看到的那样，首先我定义了一个函数来检查用户是否存在于ueEffect之外，该函数的chechking为true，但可以在用户登录时更新，我曾想过使用useState来传递该值，但仍然不起作用。请您对如何在登录完成时更新我的组件有什么建议？请帮忙。。。。。
您的useEffect只运行一次，那是在加载组件之后。现在它还没有意识到任何其他更改，因为您已经为它提供了空的依赖数组。为了在你的情况下提出解决方案，你为什么不直接打电话给
history.push("/application")
在您将数据设置为localStoare之后？那是在线之后
localStorage.setItem("user", JSON.stringify(res.data));
并移除useEffect
您可以通过React钩子进行强制更新。
声明const [render, setRerender] = useState(false);
然后在您想要更新UI时调用以下命令setRerender(!rerender);