javascript - axios createError.js :16 Uncaught (in promise) Error: Request failed with status code 400

Question

新人在这里 react 。我收到这个错误:xhr.js:177 POST https://localhost:44355/api/people/addperson 400，我不知道为什么。我检查了所有 StackOverflow，但无法从类似问题中找到好的答案。
在我的页面上，我有 3 个文本框(名字、姓氏、年龄)和一个添加按钮，用于将一个人添加到文本框下方的表格中。单击添加按钮时发生错误。
这是我的 Controller :

public class PeopleController : ControllerBase
    {
        private string _connectionString;

        public PeopleController(IConfiguration configuration)
        {
            _connectionString = configuration.GetConnectionString("ConStr");
        }

        [HttpPost]
        [Route("addperson")]
        public void AddPerson(Person person)
        {
            var repo = new PeopleRepository(_connectionString);
            repo.AddPerson(person);
        }
    }

这是我的组件:

import React from 'react';
import AddEditPerson from './AddEditPerson';
import PersonRow from './PersonRow';
import axios from 'axios';
import { produce } from 'immer';

class PeopleTable extends React.Component {
    state = {
        people: [],
        person: {
            firstName: '',
            lastName: '',
            age :''
        },
        isAdd : true
    }

    componentDidMount = () => {
        axios.get('/api/people/getpeople').then(response => {
            this.setState({ people: response.data })
        })
    }

    onAddClick = () => {
        axios.post('/api/people/addperson', this.state.person).then(() => {
            axios.get('/api/people/getpeople').then(response => {
                const person = {
                    firstName: '',
                    lastName: '',
                    age:''
                }
                this.setState({ people: response.data, person})
            })
        })
    }
}
//here I have a render function that shows a component with the textboxes 
//and the onClick for the add button is the onAddClick function above.

Answer 1

在较新版本的 .Net 中，他们对服务器上解析 json 的方式进行了更改。
过去，如果你有一个这样的 json:{prop: "100"}在服务器上你有一个这样的类:

public class Foo
{
   public int Prop {get; set;}
}

它将能够将 json 转换为该 C# 对象 -
(请注意，在 json 属性中是一个字符串，而在 C# 中它是一个 int)。
在 .Net Core 3.1 中，他们更改了此功能，并且 json 将不再正确解析。
因此，由于 this.state.person.age 是一个字符串，但在 C# 中 Age 是一个整数，最好创建一个新对象，解析年龄，然后将其发送到函数中。
我更新了我的代码:

onAddClick = () => {
        const { firstName, lastName, age } = this.state.person;
        const person = { firstName, lastName, age: parseInt(age) }
        axios.post('/api/people/addperson', person).then(response => {
            const newState = produce(this.state, draft => {
                const person = {
                    firstName: '',
                    lastName: '',
                    age: ''
                }
                draft.person = person;
                draft.people.push(response.data);
            })

            this.setState(newState);            
        })
    }

感谢 @BFree
和 @Zied Hf
.