React对接Strapi提交表单POST接口返回400 Bad Request错误

你遇到的400错误是Strapi v4接口参数格式不符合要求导致的。Strapi v4版本的REST API所有写操作（新增/更新）的请求体，都必须把业务字段包裹在data属性下，你当前代码直接将modifiedData对象作为请求体发送，接口无法识别合法参数，因此返回400 Bad Request。

只需要修改handleSubmit方法中的POST请求传参结构即可，调整后的代码如下：

handleSubmit = async e => {
  e.preventDefault();

  try {
    const response = await axios.post(
      'http://localhost:1337/api/restaurants',
      // 按照Strapi接口要求包裹data字段
      { data: this.state.modifiedData }
    );
    console.log(response);
    // 提交成功后可按需加表单重置、跳转成功页逻辑
  } catch (error) {
    // 调试阶段可以打开下面这行打印Strapi返回的具体错误信息
    // console.log(error.response.data)
    this.setState({ error });
  }
};

如果修改参数格式后仍有报错，逐一检查以下配置：

• 登录Strapi后台，进入「设置」-「用户及权限插件」-「角色」-「Public」，找到Restaurant对应的create权限勾选后保存，未开放接口权限也会触发请求错误
• 确认Restaurant的Content Type配置中，categories字段是和Category的多对多/一对多关联关系，你当前传分类id数组的写法符合关联字段传参规范，不需要额外调整
• 若开启了字段必填校验，提交前要保证name等必填字段不为空

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