React条件渲染无法检测对象属性变更 if判断始终为真问题

• 日志位置错位导致误判：你看到的canBook = 0是进入if分支之后才被修改的结果，并非if判断执行时的真实值。代码执行顺序为：先判断userDetailsObj.canBook != 0，条件成立才会进入if块；进入if块后第一行就执行updateUser()将canBook改为0，此时你在updateUser()之后打印日志，看到的必然是0，完全无法证明判断阶段的值为0。
• 数据修改未持久化：代码顶层的userDetailsObj仅在脚本首次加载时从localStorage读取一次，updateUser()只修改了内存中的JS对象，从未调用localStorage.setItem("userDetails", JSON.stringify(userDetailsObj))将更新后的值写回本地存储。只要页面刷新，脚本就会重新读取localStorage中未更新的旧数据，canBook始终为初始的非0值，判断条件会一直成立。
• 内存值被意外覆盖：如果updateData()函数内部存在重新从localStorage读取用户数据、给全局userDetailsObj重新赋值的逻辑，哪怕不刷新页面，内存中已经被改为0的canBook也会被旧值覆盖，导致下一次判断失效。
• 松散判断的隐式转换风险：你使用了松散不等于!=做判断，若canBook被意外赋值为字符串"0 "（带空格）、"false"这类无法通过隐式转换等于0的值，也会导致判断结果不符合预期。

let userDetailsString = localStorage.getItem("userDetails");
let userDetailsObj = JSON.parse(userDetailsString);

const updateUser = () => {
  userDetailsObj["hasBooked"] = 1;
  userDetailsObj["canBook"] = 0;
  // 修改内存值后立刻持久化到localStorage
  localStorage.setItem("userDetails", JSON.stringify(userDetailsObj));
};

const canBookSlot = (id) => {
  // 判断前打日志，确认判断时的真实值和类型
  console.log("判断时canBook值：", userDetailsObj.canBook, typeof userDetailsObj.canBook);
  // 用严格不等于!== 避免隐式转换坑
  if (userDetailsObj.canBook !== 0) {
    updateUser();
    Axios.post("http://localhost:3001/api/book/week1/ex", {
      room: userDetailsObj.room,
      id: id.id + 1,
    }).then(() => updateData());
  } else {
    console.log("already booked");
  }
};

额外检查项：

• 排查updateData()内部逻辑，不要在该函数内用localStorage的旧值覆盖全局userDetailsObj
• 若为单页应用，排查组件挂载逻辑，避免每次组件渲染都重新从localStorage读取未更新的旧值给userDetailsObj赋值

内容的提问来源于stack exchange，提问作者Max Andersson