前端状态重置问题排查 #

• 检查isImageRemoved状态的初始化逻辑：如果状态是在useEffect中依赖房间数据初始化，确认是否在组件重新渲染（比如弹窗复用、房间数据刷新）时被意外重置。例如避免以下错误写法：

  // 错误：每次roomData变化都会重置状态
  useEffect(() => {
    setIsImageRemoved(false);
  }, [roomData]);
  

  改为仅在组件首次挂载或弹窗首次打开时初始化状态，而非每次房间数据更新都重置。
• 追踪删除事件的完整执行流程：点击删除图标后，检查处理函数中是否在设置isImageRemoved(true)后，存在其他同步/异步操作（比如重新拉取房间详情）将状态再次设为false。

前端删除请求触发排查 #

• 用浏览器开发者工具Network面板验证请求：点击删除图标后，确认是否向/delete-uploaded-room-image发送请求：
  • 无请求：检查AntD Upload组件的onRemove事件是否正确绑定自定义处理函数，或处理函数中是否存在条件判断阻止了请求发送。
  • 请求报错：查看请求的方法、参数、响应状态码，排查跨域、参数缺失或接口路径拼写错误问题。
• 确认编辑提交的异步逻辑顺序：提交编辑时，需先判断isImageRemoved为true时，优先调用删除接口并等待其完成，再提交编辑接口，避免异步操作顺序混乱导致状态未被正确读取：

  const handleSubmit = async () => {
    if (isImageRemoved) {
      await deleteRoomImage(roomId);
    }
    await editRoom(updatedRoomData);
  };
  

后端路由与逻辑排查 #

• 检查/delete-uploaded-room-image路由配置：确认路由方法与前端请求一致（比如前端用POST，后端需配置methods=['POST']），并在路由内添加明确日志输出（如print('收到图片删除请求')），验证路由是否被正确注册、请求是否到达后端。
• 检查/edit-room的业务逻辑：确认是否接收前端传来的is_image_removed标识，若为true则执行文件删除与数据库更新操作：

  @app.route('/edit-room', methods=['POST'])
  def edit_room():
      data = request.json
      room_id = data.get('id')
      is_image_removed = data.get('is_image_removed', False)
      
      if is_image_removed:
          room = Room.query.get(room_id)
          if room and room.image:
              # 删除服务器文件
              file_path = os.path.join(UPLOAD_FOLDER, room.image)
              if os.path.exists(file_path):
                  os.remove(file_path)
              # 更新数据库字段
              room.image = None
              db.session.commit()
      
      # 其他房间信息更新逻辑
      # ...
  

• 验证服务器文件权限：确认Flask运行进程拥有目标上传目录的删除权限，避免因权限不足导致文件删除失败。

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