React客户端问题排查：includes读取错误与密码未加密

问题1：跳转Profile页时出现TypeError: Cannot read properties of undefined (reading 'includes') #

原因 #

跳转后Profile组件渲染时，收藏列表的状态还未从API请求获取到（处于undefined状态），此时直接调用数组方法includes就会触发报错。刷新页面后数据已完成加载，所以能正常显示。

解决办法 #

1. 给状态设置默认空数组：初始化收藏列表状态时，默认设为空数组，避免undefined：

   // 示例代码
   const [favoriteMovieIds, setFavoriteMovieIds] = useState([]);
   

2. 添加空值判断再调用方法：在使用includes前，用可选链或条件判断确保数据存在：

   // 原可能出错的代码
   {favoriteMovieIds.includes(movie.id) ? '取消收藏' : '添加收藏'}
   // 修改后
   {favoriteMovieIds?.includes(movie.id) ? '取消收藏' : '添加收藏'}
   // 或者更严谨的写法
   {(favoriteMovieIds && favoriteMovieIds.includes(movie.id)) ? '取消收藏' : '添加收藏'}
   

3. 确保增删请求完成后再跳转：在Movie-view页面处理收藏操作时，用await等待API请求完成，再执行页面跳转：

   const toggleFavorite = async (movieId) => {
     // 等待增删收藏的API请求完成
     await fetch(`/api/favorites/${movieId}`, { method: 'POST' });
     // 再跳转至Profile页
     navigate('/profile');
   }
   

问题2：更新密码后原哈希密码变为明文，导致登录失败 #

原因 #

更新密码时，前端可能直接将明文密码或包含原有哈希密码的用户对象传给API，而后端没有对新密码重新进行哈希处理，直接将明文存入数据库覆盖了原来的哈希值，导致后续登录时哈希验证不匹配。

解决办法 #

1. 后端处理密码哈希：确保后端API在接收新密码后，使用加密库（如bcrypt）对新密码重新哈希，再更新数据库中的密码字段，而非直接替换。示例伪代码（Node.js为例）：

   // 后端更新密码逻辑
   const newHashedPassword = await bcrypt.hash(req.body.newPassword, 10);
   await User.update({ password: newHashedPassword }, { where: { id: userId } });
   

2. 前端只传递必要字段：更新密码时，不要把整个用户对象传给API，只传递新密码的明文，避免原有哈希密码被覆盖：

   // 前端更新密码请求示例
   const updatePassword = async (newPassword) => {
     await fetch('/api/users/update-password', {
       method: 'PUT',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ newPassword })
     });
   }
   

3. 排查请求体内容：检查前端发送的更新请求体，确保没有将用户对象中原有的password（哈希值）字段一并发送，防止后端误将其作为新密码存入。

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