React控制台出现非序列化值错误及POST 400错误，后端正常求定位

错误原因 #

这个警告是Redux Toolkit默认序列化检查机制触发的：Redux要求action对象的所有属性必须是可序列化类型（如字符串、数字、普通对象，不能是函数、Symbol这类）。你发起请求时，action的meta.arg.config里包含了axios内部的xhrAdapter函数（属于不可序列化的值），因此被检测到并抛出警告。另外控制台里的400状态码是请求本身的业务错误（后端返回400），和序列化警告是两个独立问题，但序列化警告是因为错误处理时把包含函数的请求配置带入了action。

解决方案 #

以下是几种可行的解决方式：

1. 忽略特定路径的序列化检查

在Redux的store配置中，修改serializableCheck选项，跳过meta.arg.config.adapter路径的检查：

import { configureStore } from '@reduxjs/toolkit';
import yourReducer from './reducers';

const store = configureStore({
  reducer: yourReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredPaths: ['meta.arg.config.adapter'],
      },
    }),
});

2. 手动处理错误，避免传递不可序列化内容

在createAsyncThunk的异步函数里，用try/catch捕获错误，通过rejectWithValue仅返回可序列化的错误信息，不让默认错误处理把整个请求配置带入action：

export const runTask = createAsyncThunk(
  '[GET] dataGrid/runTask',
  async (params, { rejectWithValue }) => {
    try {
      const response = await getData(ENDPOINTS.run_task, params);
      return response.data;
    } catch (error) {
      return rejectWithValue({
        status: error.response?.status,
        message: error.response?.data?.message || error.message,
      });
    }
  }
);

3. 确保传入thunk的参数是可序列化的

如果是你传给thunk的参数里包含了带adapter函数的axios配置对象，不要直接传整个config，只传必要参数（如请求参数、headers），在thunk内部构建请求配置：

// 错误做法：传入带adapter的完整config
dispatch(runTask(axiosConfig));

// 正确做法：只传业务参数，在thunk内构建配置
dispatch(runTask({ taskId: 123 }));

// 对应thunk代码
export const runTask = createAsyncThunk(
  '[GET] dataGrid/runTask',
  async (params) => {
    const requestConfig = {
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
    };
    const response = await getData(`${ENDPOINTS.run_task}/${params.taskId}`, requestConfig);
    return response.data;
  }
);

关于400状态码错误 #

这是后端返回的请求错误，你可以在浏览器Network面板查看该请求的响应内容，确认后端返回的具体错误信息（如参数错误、权限问题等），再针对性调整请求参数或后端逻辑。

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