React中Axios.post提交Kebab订单时Kebab/Drink字段为null问题

问题根源 #

后端期望接收的请求体中，Kebab和Drink是嵌套对象（分别包含Name和TypeOfDrink字段），但当前前端表单的Select组件绑定的是typeOfKebab、typeOfDrink这类平级字段，且OrderDto的初始值中没有初始化kebab和drink嵌套对象，导致提交给后端的数据结构与接口要求不匹配，最终后端接收为null。

Postman测试正常是因为手动按照后端要求的嵌套结构构造了请求体，而前端代码生成的请求体缺少kebab和drink这两个嵌套层级。

修复步骤 #

1. 调整表单字段绑定路径 #

将Select组件的field属性改为嵌套路径，让Formik自动构建符合后端要求的对象结构：

• Kebab选择框绑定kebab.name
• Drink选择框绑定drink.typeOfDrink

2. 初始化嵌套对象的初始值 #

在CreateOrder组件的model中添加kebab和drink的初始空对象，确保Formik能正确追踪这些嵌套字段。

3. 确保OrderDto结构匹配后端要求 #

确认OrderDto的kebab和drink字段包含后端需要的子字段（name和typeOfDrink）。

修改后的关键代码 #

CreateOrder组件（修改初始值） #

export const CreateOrder = () => {
    const history = useHistory()

    const CreateNewOrder = async (order: OrderDto) =>{
        try {
            await axios.post('https://localhost:7117/api/Order', order);
            console.log(order)
            history.push("/orders");
        } catch (error) {
            console.error(error);
        }
    }

    return(
        <>
            <h3>Create Order</h3>
            {/* 添加kebab和drink的初始嵌套对象 */}
            <OrderForm model={{
                firstName: '', 
                lastName: '', 
                empNr: 0,
                kebab: { name: '' },
                drink: { typeOfDrink: '' }
            }}
                onSubmit={values => CreateNewOrder(values)}
            />
        </>
    )
}

OrderForm组件（修改SelectField的field属性） #

// ... 其他代码不变
<SelectField displayName="Kebab" field="kebab.name"  optionLabel="Välj kebab">
    <>
        {kebabChoice?.map(kebabs => 
            <option key={kebabs.id} value={kebabs.name}>{kebabs.name}</option>)}
    </>  
</SelectField>
<SelectField displayName="drink" field="drink.typeOfDrink"  optionLabel="Välj Dricka">
    <>
        {drinkChoice?.map(drinks => 
            <option key={drinks.id} value={drinks.typeOfDrink}>{drinks.typeOfDrink}</option>)}
    </>  
</SelectField>
// ... 其他代码不变

OrderDto（确保结构匹配） #

export interface KebabDto {
    id: number;
    name: string;
    // 其他字段根据实际情况添加
}

export interface DrinkDto {
    id: number;
    typeOfDrink: string;
    // 其他字段根据实际情况添加
}

export interface OrderDto{
    firstName: string;
    lastName: string;
    empNr?: number;
    kebab?: { name: string }; // 或直接使用KebabDto（如果包含name字段）
    drink?: { typeOfDrink: string }; // 或直接使用DrinkDto（如果包含typeOfDrink字段）
}

验证 #

修改完成后，提交表单时可以在CreateNewOrder函数中console.log(order)，查看输出的对象结构是否为：

{
  "firstName": "xxx",
  "lastName": "xxx",
  "empNr": 123,
  "kebab": { "name": "所选Kebab名称" },
  "drink": { "typeOfDrink": "所选Drink类型" }
}

该结构与后端OrderCreationDto的结构完全匹配，后端就能正确接收Kebab和Drink字段的值了。

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