Reactjs 422（不可处理实体）错误

我试图传递一个名为Questions的对象，它有3个属性。第一个和第三个属性的类型为string，第二个属性的类型为boolean。例如：

{“description:“What is ecommerce”，“requireMeeting:”true，“expID:”1234“}

当我试图通过前端发送post请求时，我得到以下错误。（但是，当我通过环回浏览器添加新对象时，它工作正常）

下面是addQues函数，它向数据库发送一个新对象

   addQues(newQues) {
    console.log(newQues);
    axios.request({
      method: 'Post',
      url: 'http://localhost:3001/api/Questions',
      data: newQues
    }).then(response => {
    }).catch(err => console.log(err));
  }

这是onSubmit函数的代码，它将要添加的对象传递给addQues

      onSubmit(e) {
    const newQues = {
      description: this.state.description,
      requireMeeting: this.state.requireMeeting,
      expID: this.state.expID
    };
    this.addQues(newQues);
    e.preventDefault();
}

这是完整的代码

import React, { Component } from 'react';
import axios from 'axios';
import '../Styles.scss';

class Questions extends Component {
  addQues(newQues) {
    console.log(newQues);
    axios.request({
      method: 'Post',
      url: 'http://localhost:3001/api/Questions',
      data: newQues
    }).then(response => {
    }).catch(err => console.log(err));
  }
  constructor() {
    super();
    // this.onChange = this.onChange.bind(this);
    this.onDescriptionChange = this.onDescriptionChange.bind(this);
    this.onExpIdChange = this.onExpIdChange.bind(this);
    this.onIsmeetingChange = this.onIsmeetingChange.bind(this);
    this.state = {
      description: '',
      requireMeeting: false,
      expID: ''
    };
  }
  onExpIdChange(e) {
    this.setState({
      expID: e.target.value
    });
  }
  onDescriptionChange(e) {
    this.setState({
      description: e.target.value
    });
  }
  onIsmeetingChange(e) {
    this.setState({
      requireMeeting: true
      // document.getElementById("checkbox").checked = true;
    });
  }
  onSubmit(e) {
    const newQues = {
      description: this.state.description,
      requireMeeting: this.state.requireMeeting,
      expID: this.state.expID
    };
    this.addQues(newQues);
    e.preventDefault();
  }
  render() {
    return (
      <div>
        <br/>
        <h1> DO NOT HESISTATE TO ASK OUR EXPERTS </h1>
        <form onSubmit={this.onSubmit.bind(this)}>
          <div className="input-field">
            <label htmlFor="description"> Description </label>
            <textarea rows="10" cols="100" name="description" onChange={this.onDescriptionChange} />
          </div>
          <div className="input-field">
            <input type="text" name="expID" onChange={this.onExpIdChange} />
            <label htmlFor="name"> expID </label>
          </div>
          <div className="checkbox">
            <label>
              <input type="checkbox" name="requireMeeting"
                onClick={this.onIsmeetingChange} />Meeting
            </label>
          </div>
          <input type ="submit" value="ASK" className="btn" />
        </form>
      </div>
    );
  }
}
export default Questions;

import React，{Component}来自'React'；
从“axios”导入axios；
导入“../Styles.scss”；
类问题扩展组件{
addQues（newQues）{
控制台日志（newQues）；
axios.request({
方法：“Post”，
网址：'http://localhost:3001/api/Questions',
数据：纽克斯
})。然后（响应=>{
}).catch（err=>console.log（err））；
}
构造函数（）{
超级（）；
//this.onChange=this.onChange.bind（this）；
this.onDescriptionChange=this.onDescriptionChange.bind（this）；
this.onExpIdChange=this.onExpIdChange.bind（this）；
this.onIsmeetingChange=this.onIsmeetingChange.bind（this）；
此.state={
说明：“”，
要求：错误，
表达式ID:“”
};
}
onExpIdChange（e）{
这是我的国家({
expID:e.target.value
});
}
onDescriptionChange（e）{
这是我的国家({
描述：e.target.value
});
}
onIsmeetingChange（e）{
这是我的国家({
要求：正确
//document.getElementById（“复选框”）.checked=true；
});
}
提交（e）{
常数newQues={
description:this.state.description，
requireMeeting:this.state.requireMeeting，
expID:this.state.expID
};
这是addQues（newQues）；
e、 预防默认值（）；
}
render（）{
返回(


请不要犹豫询问我们的专家
描述
expID
会合
);
}
}
导出默认问题；

由于http不支持布尔值，最好在POST/PUT正文中避免使用布尔值。相反，您可以将0和1发送为false、true并进行相应处理。发送0和1是通过http传输布尔值的更兼容格式。

您说过“PUT”请求，但代码显示“POST”“-你的意思是post，对吗？哦，是的，post@raymondcamdeni如果你看看你的浏览器开发工具，你能确认问题数据在表单post的正文中正确传递了吗？你可以试试

data:JSON.stringify（newQues）

我不相信这是正确的-它是有效的JSON，可以通过网络发送。这显然是错误的。你能澄清一下你的意思吗：

http不支持布尔值，最好在POST/PUT中避免布尔值
import React, { Component } from 'react';
import axios from 'axios';
import '../Styles.scss';

class Questions extends Component {
  addQues(newQues) {
    console.log(newQues);
    axios.request({
      method: 'Post',
      url: 'http://localhost:3001/api/Questions',
      data: newQues
    }).then(response => {
    }).catch(err => console.log(err));
  }
  constructor() {
    super();
    // this.onChange = this.onChange.bind(this);
    this.onDescriptionChange = this.onDescriptionChange.bind(this);
    this.onExpIdChange = this.onExpIdChange.bind(this);
    this.onIsmeetingChange = this.onIsmeetingChange.bind(this);
    this.state = {
      description: '',
      requireMeeting: false,
      expID: ''
    };
  }
  onExpIdChange(e) {
    this.setState({
      expID: e.target.value
    });
  }
  onDescriptionChange(e) {
    this.setState({
      description: e.target.value
    });
  }
  onIsmeetingChange(e) {
    this.setState({
      requireMeeting: true
      // document.getElementById("checkbox").checked = true;
    });
  }
  onSubmit(e) {
    const newQues = {
      description: this.state.description,
      requireMeeting: this.state.requireMeeting,
      expID: this.state.expID
    };
    this.addQues(newQues);
    e.preventDefault();
  }
  render() {
    return (
      <div>
        <br/>
        <h1> DO NOT HESISTATE TO ASK OUR EXPERTS </h1>
        <form onSubmit={this.onSubmit.bind(this)}>
          <div className="input-field">
            <label htmlFor="description"> Description </label>
            <textarea rows="10" cols="100" name="description" onChange={this.onDescriptionChange} />
          </div>
          <div className="input-field">
            <input type="text" name="expID" onChange={this.onExpIdChange} />
            <label htmlFor="name"> expID </label>
          </div>
          <div className="checkbox">
            <label>
              <input type="checkbox" name="requireMeeting"
                onClick={this.onIsmeetingChange} />Meeting
            </label>
          </div>
          <input type ="submit" value="ASK" className="btn" />
        </form>
      </div>
    );
  }
}
export default Questions;