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

Question

I am making an application where a user can make an Order for Kebab.

However when i'm using Axios.post some of the values always return null (Kebab and Drink).

When i'm using postman it all works as expected though, so it must be something with the frontend, I reckon.

This is my orderForm component:

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;
}

Here i am also fetching the different kinds of kebabs and drinks that the user can choose from.

Here is the component where I'm trying to create the order:

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)
                }
            />

        </>
    )
}

It takes one argument where the order is a type of OrderDto:

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

So when im creating a pizza, i get the values in my backend from firstName, lastName and empNr. Though Kebab and Drink is always null no matter what I do, except if im using Postman.

Postman body:

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

.net backend:

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; }

    }

This is the code im currently using for my orders. I made a relationship between Order => kebab and Order => Drink where and order is supposed to have one Drink and one kebab.

In my form in react im fetching Kebab and Drinks and use these in an option so that i can use whats already in the database and put it in my order. Atleast thats how it is supposed to work.

Answer 1

Your drink and kebab fields are labeled typeOfDrink and typeOfKebab I cant see that you do any processing of these values and the api expects. kebab and drink fields.

If you only need to pass the drink/kebab type to the api and the api can resolve the drink/kebab that should be fine and you should just update the api and the interface to only take those fields. However if you need more meta data from Drink-/KebabDto you will need to accommodate that in the frontend. Either by making sure the that data is set in the form or resolve it from the type before passing it to the backend.

EDIT:

With the updated answer you can see that the for will not give you the same object as you pass with postman.

You will have to change the filed to accommodate the type you expect in the api: field="typeOfKebab" => field="kebab.name" and 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">

However since you only use one field in both KebabDto and DrinkDto, why not just change OrderDto to

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