React客户端收藏电影跳转报错及密码更新未加密问题求助

一、收藏/取消收藏后跳转个人资料页报错问题 #

问题本质 #

完成收藏操作后，本地用户状态未及时同步更新，跳转至ProfileView时组件仍基于旧状态渲染，引发报错；但刷新页面会重新从API拉取最新数据，因此收藏列表最终显示正常。

解决步骤 #

1. 在MovieView的收藏操作逻辑中，API请求完成后立即同步更新本地用户状态：
   • 若用Context/Redux管理状态，直接修改favorites数组（注意遵循不可变更新原则）
   • 或重新调用获取用户信息的API，将返回的最新数据同步到本地状态
2. 确保跳转至ProfileView前，用户状态已完成更新，避免组件使用过期数据渲染

示例代码思路（基于Context）：

const handleToggleFavorite = async () => {
  try {
    // 执行收藏/取消收藏API请求
    const updatedUser = await toggleFavoriteMovie(movieId);
    // 更新Context中的用户状态
    setUser(updatedUser);
    // 状态更新完成后再跳转
    navigate('/profile');
  } catch (err) {
    console.error(err);
  }
};

二、个人资料更新时密码未加密导致登录失败问题 #

问题本质 #

更新密码时前端直接发送明文密码到API，而后端数据库存储的是哈希加密后的密码，导致更新后密码以明文存入，后续登录时哈希验证不匹配，触发“无此用户”提示。

解决步骤 #

1. 前端处理方案：提交更新请求前，用加密库对密码哈希处理：
   • 安装依赖：npm install bcryptjs
   • 在更新逻辑中对明文密码哈希后再发送：

     import bcrypt from 'bcryptjs';
     
     const handleUpdateProfile = async (userData) => {
       if (userData.password) {
         // 生成盐值并哈希密码
         const salt = await bcrypt.genSalt(10);
         userData.password = await bcrypt.hash(userData.password, salt);
       }
       // 调用更新用户信息的API
       await updateUserProfile(userData);
     };
     

2. 后端优化方案（更安全）：若后端权限允许，修改用户更新接口，自动对传入的password字段做哈希处理，避免前端处理加密逻辑，降低安全风险

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