Reactjs 内部服务器错误&；TypeError:无法对'；未定义'；或'；空'；

新手，我正在尝试从react前端使用axios执行POST请求。我曾尝试使用express直接在postgreSQL数据库上执行操作，但没有成功。因此，我使用axios获取数据，这很有效，所以我希望axios的帖子也能起作用。然而，我得到的结果是：

TypeError: Cannot destructure property `semester1` of 'undefined' or 'null'.

在本地主机中，错误导致：

500 (Internal Server Error)

这是我的密码：

import React from 'react'
import axios from 'axios'
import { Add } from '../styledComponents/scaddGrades'

const apiURL = `http://localhost:5000/grades`;

class addGrades extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            sem1: 0,
            sem2: 0,
            sem3: 0,
            sem4: 0,
            final: 0,
        }

    this.onButtonClick = this.onButtonClick.bind(this);
    this.inputHandler = this.inputHandler.bind(this);

    this.handleSubmit = this.handleSubmit.bind(this);
}

onButtonClick(e) {
    e.preventDefault();
    console.log("Add Grades")
}

handleSubmit(e) {
    e.preventDefault();

    const data = {
        semester1: this.state.sem1,
        semester2: this.state.sem2,
        semester3: this.state.sem3,
        semester4: this.state.sem4,
        finalgrades: this.state.final
    }

    axios.post(apiURL, { data })
        .then(res => {
            console.log("response: ", res)
        })
        .catch(error => {
            console.log(error)
        })
}

inputHandler(e) {
    this.setState({
        [e.target.name]: e.target.value
    })
    console.log(this.state)
}

render() {
    return (
        <div>
            <Add id="AddGrades" onClick={this.onButtonClick}>Add Grades</Add>
            <form onSubmit={this.handleSubmit}>
                <input type="text" name="sem1" onChange={this.inputHandler} />
                <input type="text" name="sem2" onChange={this.inputHandler} />
                <input type="text" name="sem3" onChange={this.inputHandler} />
                <input type="text" name="sem4" onChange={this.inputHandler} />
                <input type="text" name="final" onChange={this.inputHandler} />
                <button type="submit"> Add</button>
            </form>
        </div>
    )
}
}

export default addGrades;

---

您需要在设置值之前传播状态，并指定内容类型

 import React from 'react'
import axios from 'axios'
import { Add } from '../styledComponents/scaddGrades'

const apiURL = `http://localhost:5000/grades`;

class addGrades extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            sem1: 0,
            sem2: 0,
            sem3: 0,
            sem4: 0,
            final: 0,
        }

    this.onButtonClick = this.onButtonClick.bind(this);
    this.inputHandler = this.inputHandler.bind(this);

    this.handleSubmit = this.handleSubmit.bind(this);
}

onButtonClick(e) {
    e.preventDefault();
    console.log("Add Grades")
}

handleSubmit(e) {
    e.preventDefault();

    const data = {
        semester1: this.state.sem1,
        semester2: this.state.sem2,
        semester3: this.state.sem3,
        semester4: this.state.sem4,
        finalgrades: this.state.final
    }

  const config = {
      headers: {
        "Content-Type": "application/json",
        "Access-Control-Allow-Origin": "*"
      }
    };

    axios.post(apiURL,data,config)
        .then(res => {
            console.log("response: ", res)
        })
        .catch(error => {
            console.log(error)
        })
}

inputHandler(e) {
    this.setState({
        ...this.state,
        [e.target.name]: e.target.value
    })
    console.log(this.state)
}

render() {
    return (
        <div>
            <Add id="AddGrades" onClick={this.onButtonClick}>Add Grades</Add>
            <form onSubmit={this.handleSubmit}>
                <input type="text" name="sem1" onChange={this.inputHandler} />
                <input type="text" name="sem2" onChange={this.inputHandler} />
                <input type="text" name="sem3" onChange={this.inputHandler} />
                <input type="text" name="sem4" onChange={this.inputHandler} />
                <input type="text" name="final" onChange={this.inputHandler} />
                <button type="submit"> Add</button>
            </form>
        </div>
    )
}
}

export default addGrades;

从“React”导入React
从“axios”导入axios
从“../styledComponents/scaddGrades”导入{Add}
常量apiURL=`http://localhost:5000/grades`;
类AddReact.Component{
建造师（道具）{
超级（道具）；
此.state={
sem1:0，
sem2:0，
sem3:0，
sem4:0，
决赛:0,，
}
this.onButtonClick=this.onButtonClick.bind（this）；
this.inputHandler=this.inputHandler.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
ON按钮单击（e）{
e、 预防默认值（）；
console.log（“添加等级”）
}
handleSubmit（e）{
e、 预防默认值（）；
常数数据={
semester1:this.state.sem1，
semester2:this.state.sem2，
学期3：this.state.sem3，
学期4：this.state.sem4，
最终等级：this.state.final
}
常量配置={
标题：{
“内容类型”：“应用程序/json”，
“访问控制允许来源”：“*”
}
};
post（apiURL、数据、配置）
。然后（res=>{
日志（“响应：”，res）
})
.catch（错误=>{
console.log（错误）
})
}
inputHandler（e）{
这是我的国家({
…这个州，
[e.target.name]：e.target.value
})
console.log（this.state）
}
render（）{
返回(
加分
添加
)
}
}
导出默认等级；

该错误意味着

request.bodyParser

未定义，这很有意义，因为request对象上没有此类属性。很可能是

主体

：

const { semester1, semester2, semester3, semester4, finalgrades } = request.body;

---

我想您已经检查了body解析器库了？

什么意思？您能告诉我如何指定内容类型吗？很抱歉，我对此很陌生。在更改部分状态之前，您需要保持当前状态，在标题中指定您要发送的数据类型，即

内容类型

，查看上述代码是否解决了问题我尝试过，但问题未解决。错误“无法破坏结构属性保持不变”。也许问题在于api代码。我刚把它贴在上面。谢谢你的帮助。

const { semester1, semester2, semester3, semester4, finalgrades } = request.body;