React调用ASP.NET Core Patch接口返回400错误求助

核心问题：请求数据格式不匹配导致模型绑定失败（400错误） #

400 Bad Request通常意味着后端无法正确解析请求体，结合Postman能正常工作的情况，问题出在React请求的数据内容或结构上，主要有以下几个可能：

1. userId 赋值错误，传递了非字符串类型 #

你的代码中：

const sepet = JSON.parse(sepetString);
BasketPostVM.userId=sepet;

如果sepetString存储的是一个对象（比如{"userId": "xxx"}），那么sepet是对象，赋值给userId后，请求体中的userId会是嵌套对象，而后端BasketPostVM的userId是string?类型，模型绑定直接失败，返回400。

修复：
确认sepetString的内容：

• 如果sepetString本身就是用户ID的字符串（比如"user_123"），去掉JSON.parse：

  BasketPostVM.userId = sepetString;
  

• 如果sepetString是包含userId的JSON对象（比如{"userId": "user_123"}），取对应的属性：

  const sepet = JSON.parse(sepetString);
  BasketPostVM.userId = sepet.userId; // 取对象中的userId字段
  

2. 复用全局BasketPostVM对象导致旧数据残留 #

你定义的BasketPostVM是全局对象，多次请求时会保留之前的字段值（比如productColors、productOptions可能是旧的空值或无效值），如果后端对某些字段有隐性校验，会导致请求失败。

修复：
每次请求时创建新的BasketPostVM实例，避免数据污染：

// 替换全局对象，每次请求创建新的
const basketPostData = {
  userId: '',
  ProductName: '',
  productColors: '', // 根据实际需求赋值，比如从状态/参数获取
  productOptions: ''  // 同上
};

// 赋值
basketPostData.userId = 你的正确用户ID;
basketPostData.ProductName = response.productId;
// 补充赋值productColors和productOptions（如果Postman请求中包含这些字段）

// 发送请求
const updateBasketResponse = await fetch('http://localhost:5187/api/Basket/updatebasket', {
  method: 'PATCH',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(basketPostData),
});

3. 缺失productColors/productOptions字段（可选） #

虽然后端模型中这两个字段是可空的，但如果Postman请求中你传递了有效值，而React请求中这两个字段是空字符串，某些情况下可能触发后端的隐性校验（比如EF Core的实体更新逻辑），建议保持和Postman请求一致的字段内容。

额外调试步骤 #

如果以上修复后仍有问题，建议：

• 在React中打印请求体内容：console.log(JSON.stringify(basketPostData))，和Postman的请求体对比，确保结构和值完全一致。
• 在后端添加日志，查看模型绑定错误详情：

  [HttpPatch,Route("updatebasket")]
  public IActionResult UpdateBasketItems([FromBody] BasketPostVM updatedbasket) 
  {
      if (!ModelState.IsValid)
      {
          // 打印所有模型绑定错误
          var errors = ModelState.SelectMany(x => x.Value.Errors.Select(e => e.ErrorMessage));
          foreach(var err in errors)
          {
              Console.WriteLine(err);
          }
          return BadRequest(ModelState);
      }
      // 原有逻辑...
      Basket existingBasket = dbcontext.BasketTable.SingleOrDefault(x => x.UserID == updatedbasket.userId);
      if (existingBasket != null)
      {
          existingBasket.ProductIDs.Add(updatedbasket.ProductName); 
          existingBasket.ProductColor = updatedbasket.productColors;
          existingBasket.ProductOptions = updatedbasket.productOptions;
          dbcontext.SaveChanges();
          return Ok(true);
      }
      return Ok(false);
  }
  

  这样可以明确看到后端拒绝请求的具体原因。

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