Axios.post 返回发送 null，即使后端正在工作

Question

我正在制作一个应用程序，用户可以在其中订购烤肉串。

但是，当我使用

Axios.post

时，某些值总是返回 null（烤肉串和饮料）。

当我使用 Postman 时，一切都按预期工作，所以我认为它一定是前端的问题。

这是我的

orderForm

组件：

export const OrderForm = (props: OrderFormProps) => {

    const [kebabChoice, setKebabChoice] = useState<KebabDto[]>();
    const [drinkChoice, setDrinkChoice] = useState<DrinkDto[]>();
    
    useEffect(()=>{
        axios.get(`https://localhost:7117/api/Kebab`)
        .then((response: AxiosResponse<KebabDto[]>) =>{
            setKebabChoice(response.data);

        })
    },[])
    useEffect(()=>{
        axios.get(`https://localhost:7117/api/Drink`)
        .then((response: AxiosResponse<DrinkDto[]>) =>{
            setDrinkChoice(response.data);

        })
    },[])

    return(
        <Formik
            initialValues = {props.model}
            onSubmit = {props.onSubmit}
            validationSchema = {Yup.object({
                firstName: Yup.string().required('This field is required').firstLetterUppercase()
            })}
        >
            {(formikProps) =>(
                <Form>
                    
                <TextField displayName="Firstname" field="firstName" type="text"/>
                <TextField displayName="Lastname" field="lastName" type="text" />
                <TextField displayName="Employee number" field="empNr" type="number" />
                
                <SelectField displayName="Kebab" field="typeOfKebab"  optionLabel="Välj kebab">
                        <>
                            {kebabChoice?.map(kebabs => 
                                <option key={kebabs.id} value={kebabs.name}>{kebabs.name}</option>)}
                        </>  
                </SelectField>
                <SelectField displayName="drink" field="typeOfDrink"  optionLabel="Välj Dricka">
                        <>
                            {drinkChoice?.map(drinks => 
                                <option key={drinks.id} value={drinks.typeOfDrink}>{drinks.typeOfDrink}</option>)}
                        </>  
                </SelectField>

                <Button className="btn btn-primary" disabled={formikProps.isSubmitting} type="submit">Save Changes</Button>
                <Link className="btn btn-secondary mt-2" to="/drinks">Cancel</Link>
                </Form>
            )}
        </Formik>
    )
}

interface OrderFormProps{
    model: OrderDto;
    onSubmit(values: OrderDto, actions: FormikHelpers<OrderDto>) : void;
}

这里我还获取了用户可以选择的不同种类的烤肉串和饮料。

这是我尝试创建订单的组件：

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>

            <OrderForm model={{firstName: '', lastName: '', empNr: 0}}
                onSubmit={values => 
                    CreateNewOrder(values)
                    // console.log(values)
                }
            />

        </>
    )
}

它需要一个参数，其中顺序是一种

OrderDto

:

export interface OrderDto{
    firstName: string;
    lastName: string;
    empNr?: number;
    kebab?: KebabDto;
    drink?:DrinkDto;
}

因此，当我创建披萨时，我从

firstName

、

lastName

和

empNr

获取后端中的值。尽管无论我做什么，Kebab 和 Drink 总是 null，除非我使用 Postman。

邮递员本体：

{
  "firstName": "Marcus",
  "lastName": "Rosberg",
  "empNr": 1111,
  "kebab": {
    "name": "Kebabrulle"
  },
  "drink": {
    "typeOfDrink": "Fanta"
  }
}

.net 后端：

EndPoint:

[HttpPost]
        public async Task<ActionResult> PostOrder([FromBody] OrderCreationDto orderCreation)
        {

            
            var order = mapper.Map<Order>(orderCreation);

            context.Orders.Add(order);
            //await context.SaveChangesAsync();

            return NoContent();
        }

OrderCreationDto:
 public class OrderCreationDto
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public int EmpNr { get; set; }
        public KebabCreationDto Kebab { get; set; }
        public DrinkCreationDto Drink { get; set; }
    }

KebabCreationDto:

 public class KebabCreationDto
    {
        public string Name { get; set; }
    }

DrinkCreationDto:

 public class DrinkCreationDto
    {
        public string TypeOfDrink { get; set; }

    }

这是我当前用于订单的代码。我在 Order => kebab 和 Order => Drink 之间建立了关系，并且订单应该有一份饮料和一份烤肉串。

在我的反应表单中，我正在获取烤肉串和饮料，并在选项中使用它们，以便我可以使用数据库中已有的内容并将其放入我的订单中。至少它应该是这样工作的。

Answer 1

您的饮料和烤肉串字段标记为

typeOfDrink

和

typeOfKebab

我看不到您对这些值进行任何处理，并且 api 期望这样做。

kebab

和

drink

字段。

如果您只需要将饮料/烤肉串类型传递给 api，并且 api 可以解析饮料/烤肉串，那应该没问题，您应该只更新 api 和接口以仅采用这些字段。但是，如果您需要来自 Drink-/KebabDto 的更多元数据，您将需要在前端中容纳它。确保在表单中设置该数据，或者在将其传递到后端之前从类型中解析它。

编辑：

通过更新的答案，您可以看到 for 不会给您与邮递员传递的对象相同的对象。

您必须更改字段以适应您在 api 中期望的类型：field="typeOfKebab" => field="kebab.name" 和 field="typeOfDrink" => field="drink.typeOfDrink"

<SelectField displayName="Kebab" field="kebab.name"  optionLabel="Välj kebab">
<SelectField displayName="drink" field="drink.typeOfDrink"  optionLabel="Välj Dricka">

但是，既然您在 KebabDto 和 DrinkDto 中只使用一个字段，为什么不直接将 OrderDto 更改为

export interface OrderDto{
    firstName: string;
    lastName: string;
    empNr?: number;
    kebab?: string;
    drink?: string;
}