Strapi+React CRUD应用PUT请求返回400错误求助

核心问题：发起PATCH更新请求时，请求体未符合Strapi REST API要求的{ data: {...} }结构，且未使用用户输入的表单新数据，导致返回400错误。同时编辑表单未初始化加载原始宠物数据，体验不佳。

步骤1：修复表单初始化，加载原始宠物数据 #

在EditPetEntry.js中添加useEffect，当宠物数据加载完成后，将原始数据填充到表单状态中：

useEffect(() => {
  if (pet?.data) {
    const { name, animal, breed, age, location, sex } = pet.data;
    setName(name);
    setAnimal(animal);
    setBreed(breed);
    setAge(age);
    setLocation(location);
    setSex(sex);
  }
}, [pet]);

步骤2：修复更新请求的参数传递 #

修改handleEditPet函数，将用户输入的表单数据包装成Strapi要求的结构：

const handleEditPet = () => {
  updatePet({
    id: petId,
    data: {
      name,
      animal,
      breed,
      age,
      location,
      sex
    }
  });
};

步骤3：修复updatePet mutation的请求体结构 #

在petApi.js中，调整updatePet的请求体，确保符合Strapi的格式要求：

updatePet: builder.mutation({
  query: (payload) => ({
    url: `/pets/${payload.id}`,
    method: 'PATCH',
    body: { data: payload.data }, // 包裹为Strapi要求的data结构
  }),
  invalidatesTags: ['Pet'],
}),

额外优化 #

删除EditPetEntry.js中未使用的JSON.stringify代码行：

// 移除这行无用代码
const data = JSON.stringify({
    "data": {
        "name": name,
        "animal": animal,
        "breed": breed,
        "age": age,
        "location": location,
        "sex": sex
    }
});

修复说明 #

1. Strapi的REST API强制要求创建/更新请求的请求体必须包裹在data字段中，这是你收到"Missing 'data' payload"错误的直接原因。
2. 之前的代码传递了原始宠物数据（结构为{ data: {...}, meta: {...} }），未使用用户输入的新值，既不符合格式要求也无法完成数据更新。
3. 表单初始化后，用户可以直接基于原始数据编辑，提升操作体验。

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