React更新MongoDB表单数据刷新后不持久需重登才生效如何解决

这个问题和你猜测的JWT有关，但核心是两个叠加的bug，不是JWT本身的机制问题：

1. 后端接口逻辑问题：你的/user/protected获取用户信息的接口，是直接解析JWT令牌里存储的用户字段返回，没有查数据库。JWT是签发后就固定内容的无状态令牌，你修改数据库数据不会自动更新已经发出去的旧JWT里存的内容，所以每次刷新页面拉用户信息，拿到的都是旧JWT里写死的老数据，只有退出重登的时候，服务端才会查最新库数据生成新JWT，才能拿到更新后的值。
2. 前端表单默认提交bug：你的更新按钮是type="submit"类型，绑定的onClick事件没有阻止表单默认行为，点击按钮时会在updateUser异步请求还没完成、本地state还没更新的时候，直接触发浏览器原生表单提交导致页面重载，你写在PUT请求后的setState逻辑根本没机会执行。

分前端、后端两部分改：

前端代码修正 #

• 首先给updateUser方法增加事件参数，阻止表单默认提交行为，同时给PUT请求补上和GET请求一致的鉴权头、跨域cookie配置，更新完成后主动重新拉取一次最新用户数据兜底，避免依赖PUT接口返回结构不对导致state不更新：

const updateUser = async (e) => {
  // 阻止表单默认提交触发页面刷新
  e.preventDefault()
  try {
    const userData = {
      firstName: firstName,
      lastName: lastName,
      city: city,
      email: email
    }
    const API_URL = `${process.env.REACT_APP_API_URL}user/`;
    const userId = id;
    
    await axios.put(`${API_URL}/${userId}/edit`, userData, {
      withCredentials: true,
      headers: {
        Authorization: `Bearer ${user}`,
      }
    })
    // 更新完成后重新拉取最新用户数据，不用依赖PUT接口返回值
    checkUser()
  } catch (error) {
    console.warn(error)
  }
}

• 把“修改密码”的按钮类型从submit改成button，避免点击时触发表单提交，同时修正按钮上重复的className拼写错误：

<button
  type="button"
  className="btn btn-lg"
>
  <a href="edit/password" className="text-decoration-none">
    Change Password
  </a>
</button>

• 给useEffect补上正确的依赖项，避免token更新后组件拿不到最新的cookie值：

useEffect(() => {
  if (!user) {
    navigate('/')
  } else {
    checkUser();
  }
// 把用到的外部变量都加进依赖
}, [user, navigate]);

后端逻辑修正（核心必改） #

两种方案二选一即可，推荐第一种：

• 方案1（性能更好，逻辑简单）：修改/user/protected接口的逻辑，解析JWT拿到用户id之后，用这个id去MongoDB查询最新的用户文档，把数据库查到的最新用户信息返回给前端，不要直接返回JWT payload里写死的用户字段。
• 方案2：在用户信息更新接口处理完数据库修改后，重新生成包含最新用户字段的JWT，通过Set-Cookie响应头写回浏览器，替换掉旧的access_token cookie，这样后续请求带的新JWT里存的就是最新用户数据。

改完之后可以先在浏览器控制台看/user/protected接口的响应值，如果接口返回的还是旧名字，说明后端逻辑没改对；如果接口返回的是新名字但页面没更新，再检查前端checkUser方法里的state赋值逻辑有没有写错字段路径。

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