Question

新来的反应。我收到此错误：xhr.js:177 POST https://localhost:44355/api/people/addperson 400，我不知道为什么。我查遍了 StackOverflow，但在类似问题中找不到好的答案。

在我的页面上，我有 3 个文本框（名字、姓氏、年龄）和一个添加按钮，用于将一个人添加到文本框下方的表格中。单击添加按钮时出现错误。

这是我的控制器：

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 .

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

1 个答案: