React，条件渲染不会在对象中注册更改

Question

由于某种原因，canBookSlot()中的if语句只检查一次。第二次触发canBookSlot()时，运行updateUser()后，userDetailsObj.canBook应该是0。根据控制台日志，情况就是这样，但是if语句仍然在运行，为什么?

let userDetailsString = localStorage.getItem("userDetails");
let userDetailsObj = JSON.parse(userDetailsString);
const updateUser = () => {
userDetailsObj["hasBooked"] = 1;
userDetailsObj["canBook"] = 0;
};
const canBookSlot = (id) => {
if (userDetailsObj.canBook != 0) { // always true
updateUser();
Axios.post("http://localhost:3001/api/book/week1/ex", {
room: userDetailsObj.room,
id: id.id + 1,
}).then(() => updateData());
} else {
console.log("already booked");
}
};

Answer 1

每次渲染后，userDetailsObj将从localStorage获取该值。这就是组件内的每个变量的行为，它不是用useState钩子生成的state，也不是用useRef钩子生成的ref。您可以通过使用state来解决这个问题，如下所示:

const [userDetails, setUserDetails] = useState(JSON.parse(localStorage.getItem("userDetails")));
const updateUser = () => {
const newUserDetails = { ...userDetailsObj, hasBooked: 1, canBook: 0 };
setUserDetails(newUserDetails);
localStorage.setItem("userDetails", JSON.stringify(newUserDetails));
};
const canBookSlot = (id) => {
if (userDetails.canBook != 0) {
//Always true
updateUser();
Axios.post("http://localhost:3001/api/book/week1/ex", {
room: userDetailsObj.room,
id: id.id + 1,
}).then(() => updateData());
} else {
console.log("already booked");
}
};

Answer 2

你能说明这段代码在哪里运行吗?您使用的是类组件还是功能组件?你介意分享一下整个组件吗?如果它正在做我认为它正在做的事情，let userDetailsString = localStorage.getItem("userDetails");正在运行每次渲染这意味着在每次渲染上，它在localStorage中获取值并使用它，而不是使用存储在userDetailsObj中的对象。

如果你正在使用功能组件，你可以使用state来修复这个问题。

let userDetailsString = localStorage.getItem("userDetails");
let [userDetailsObj, updateUserDetailObj] = useState(JSON.parse(userDetailsString));
const updateUser = () => {
let u = { ...userDetailsObj, 
hasBooked: 1,
canBook: 0,
}
updateUserDetailObj(u);
};

如果你正在使用类组件，让我知道，我会更新它与该选项。