React+Strapi CRUD应用PUT请求返回400 Bad Request求助排查

核心问题分析 #

你的PUT请求返回400错误主要有两个原因：

1. RTK Query mutation参数传递错误：updatePet的query函数定义为接收两个参数，但RTK Query的mutation调用仅支持单个参数，导致id和payload传递异常。
2. 手动序列化请求体：你用JSON.stringify()处理了请求数据，但RTK Query的fetchBaseQuery会自动将对象序列化为JSON，手动序列化后会传递字符串格式的body，Strapi无法正确解析。

具体修复步骤 #

1. 修正RTK Query的updatePet端点 #

修改petApi.js中的updatePet mutation定义，将参数改为单个对象：

updatePet: builder.mutation({
  query: ({ id, payload }) => ({ // 改为接收单个对象参数
    url: `/pets/${id}`,
    method: 'PUT',
    body: payload,
    headers: {
      'Content-type': 'application/json; charset=UTF-8',
    },
  }),
  invalidatesTags: ['Pet'],
}),

2. 修正EditPetEntry中的请求调用 #

去掉JSON.stringify()，直接传递JS对象，并正确传递参数给updatePet：

在EditPetEntry.js中：

// 移除JSON.stringify，直接定义JS对象
const data = {
  "data": {
    "name": name,
    "animal": animal,
    "breed": breed,
    "age": age,
    "location": location,
    "sex": sex
  }
};

const handleEditPet = () => {
  // 使用路由参数的id（更可靠），传递包含id和payload的对象
  updatePet({ id: id, payload: data });
};

3. 初始化编辑表单数据（可选但必要） #

添加useEffect加载当前宠物的原有数据，避免空字段提交：

在EditPetEntry.js中引入并使用useGetPetsQuery：

import { useUpdatePetMutation, useGetPetsQuery } from '../services/petApi';

export default function EditPetEntry() {
  // ... 原有状态定义 ...
  const { id } = useParams();
  const { data: pets } = useGetPetsQuery();

  // 加载原有宠物数据填充表单
  useEffect(() => {
    if (pets?.data) {
      const targetPet = pets.data.find(pet => pet.id == id);
      if (targetPet) {
        const { name, animal, breed, age, location, sex } = targetPet.attributes;
        setName(name);
        setAnimal(animal);
        setBreed(breed);
        setAge(age.toString()); // 因为age是number类型，转为字符串适配input
        setLocation(location);
        setSex(sex);
      }
    }
  }, [pets, id]);

  // ... 其余代码 ...
}

4. 验证ID的正确性 #

确认petId或路由参数id是否为有效的宠物ID，可以在组件中打印日志排查：

console.log('路由ID:', id, 'Context ID:', petId);

优先使用路由参数的id，因为路由已经明确传递了编辑目标的ID，避免context传递可能出现的空值或错误值。

额外注意事项 #

• 确保Strapi的pets内容类型允许PUT请求，且字段权限配置正确（比如name、animal等字段允许编辑）。
• 检查浏览器DevTools的Network标签，查看PUT请求的具体请求体和响应信息，进一步定位错误细节。

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