React调用BookstoreAPI新增书籍POST接口返回400错误排查

你遇到的POST接口400报错核心原因是请求体缺失必填的author字段，另外代码里还有一处Axios传参隐患，只是当前接口校验规则没触发报错。
这个Bookstore API的新增书籍接口对请求体有强校验，必须同时传4个字段，缺任意一个、字段值为undefined/空字符串都会返回400：

• item_id：字符串类型的书籍唯一ID
• title：书籍标题
• author：书籍作者（你漏传了这个字段）
• category：书籍分类
  你现在的代码把作者信息拼接进了title字段，构造的APIbook对象里根本没有author属性，接口校验直接不通过。
  另外你把作者和标题拼接存储的逻辑还有额外bug：如果书名或作者名本身包含-字符，后续拉取书籍列表用split(' - ')解析的时候会出现字段错位。

1. 调整新增接口的请求体构造逻辑，补全必填字段，去掉不必要的字符串拼接：

const APIbook = {
  item_id: id,
  title,
  author,
  category,
};

2. 修正DELETE请求的传参写法，符合Axios的API规范：
   Axios的delete方法第二个参数是全局请求配置，请求体必须放在配置的data属性下，你现在直接传body对象会被Axios当成配置解析，根本不会作为请求体发送。刚好当前删除接口不校验请求体、只认路径上的ID参数所以没报错，后续接口规则调整就会出问题：

// 原错误写法
// await axios.delete(url, body);
// 修正后
await axios.delete(url, { data: body });

3. 同步调整拉取书籍列表的解析逻辑，适配字段分开存储的格式，不需要再手动拆分字符串，避免拆分错位问题。

如果改完还是报400，在axios.post调用前加一行日志打印完整的请求体，检查四个字段是否存在值为undefined、空字符串、类型错误（比如item_id传了数字类型）的情况：

console.log('新增书籍请求参数：', APIbook);
await axios.post(url, APIbook);

内容的提问来源于stack exchange，提问作者David Jose Verde Alvarez