使用createAsyncThunk和Axios发POST请求时持续出现400错误求助

针对你遇到的POST请求400错误，结合你的代码，主要从以下几个方向排查：

1. 确认POST请求的参数结构匹配API要求 #

很多书店类API对新增书籍的参数格式有严格要求，比如该API可能期望的参数结构是包含item_id、title、author、category的对象，而非你传入的任意book结构。示例：

// 符合API要求的参数结构示例
const bookData = {
  item_id: "your-unique-book-id",
  title: "Sample Book",
  author: "John Doe",
  category: "Fiction"
};

如果你的book对象缺少这些必填字段或结构不符，就会触发400错误。

2. 修正DELETE请求的URL拼接错误 #

你的DELETE请求URL拼接缺少斜杠，会导致请求地址无效：

// 错误写法：拼接后变成 .../booksbookId
const response = await axios.delete(`${API_URL}${book.id}`);

// 正确写法：添加斜杠分隔路径
const response = await axios.delete(`${API_URL}/${book.id}`);

3. 打印详细错误信息定位原因 #

在addBook的thunk中添加错误捕获，打印API返回的具体错误提示，能直接明确问题所在：

export const addBook = createAsyncThunk(ADD_BOOK, async (book) => {
  try {
    const response = await axios.post(API_URL, book);
    return response.data;
  } catch (error) {
    console.error('新增书籍错误详情:', error.response?.data || error.message);
    throw error; // 抛出错误让Redux处理
  }
});

4. 确保请求头设置正确 #

虽然Axios默认会设置Content-Type: application/json，但如果API有特殊要求，可以显式指定：

const response = await axios.post(API_URL, book, {
  headers: {
    'Content-Type': 'application/json'
  }
});

5. 修复extraReducers的写法错误 #

你的getBooks.fulfilled reducer写法存在问题，未正确处理state更新：

extraReducers: (builders) => {
  builders.addCase(getBooks.fulfilled, (state, action) => {
    // 替换state或更新数组
    return action.payload;
    // 或者针对数组场景：
    // state.splice(0, state.length, ...action.payload);
  });
},

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