反应POST提取请求抛出TypeError
React POST fetch request throwing TypeError

我正在学习如何将React路由器应用程序连接到MySQL数据库。 在连接到数据库之前，它已经获取了所有能够正常工作的请求（使用JSON文件）。 连接到数据库后，请求正常工作-包括发布，但是发布引发错误“ TypeError：无法提取”。

它还在“网络”>“标题”中显示警告，“显示临时标题。”此外，我在客户端组件中设置的警报会弹出，但是当我单击“确定”时，发帖请求将通过，我得到状态码200 ，以及db中的数据记录。当我删除警报时，该请求根本不起作用。

下面的代码中有什么看起来不对吗？ 如何进一步调试？

客户端组件：

import React, { Component } from 'react';

class NewChirp extends Component {
    constructor() {
        super();
        this.state = {
            user: "",
            text: ""
        }
        this.fetchChirps = this.fetchChirps.bind(this)
        this.inputHandler = this.inputHandler.bind(this)
    }

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

    fetchChirps() {
        fetch('http://127.0.0.1:3000/api/chirps/', {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                user: this.state.user,
                text: this.state.text,
            })
        })
            .catch(err => {
                alert("Error: Your chirp was not created");
                console.log(err)
            })
    }

    render() {
        return (
            <div>
                <div className="input">
                <form action="">
                    <input
                        type="text"
                        placeholder="UserName"
                        size="10"
                        id="user"
                        name="user"
                        onChange={this.inputHandler}
                        defaultValue={this.state.user}
                    />
                    <input
                        type="text"
                        placeholder="Type a new chirp"
                        size="60"
                        id="text"
                        name="text"
                        onChange={this.inputHandler}
                        defaultValue={this.state.text}
                    />
                    <button
                        onClick={this.fetchChirps}
                        id="submit">
                        Submit
                    </button>
                </form>
                </div>
            </div >
        )
    }
}
export default NewChirp;

服务器中的路由：

import { Router } from 'express';
import db from '../db'

let router = Router();

router.get('/:id?', async (req, res) => {
    let id = req.params.id;
    if (id) {
        try {
            let results = await db.one(id);
            res.json(results);
        } catch (e) {
            console.log(e);
            res.sendStatus(500).json({error: e || "Something went wrong"});
        }
    } else {
        try {
            let results = await db.all();
            res.json(results);
        } catch (e) {
            console.log(e);
            res.sendStatus(500);
        }
    }
});

router.delete('/:id', async (req, res) => {         
    let id = req.params.id;
    try {
        let results = await db.del(id);
        res.json(results)
    } catch (e) {
        console.log(e);
        res.sendStatus(500);
    }
    res.sendStatus(200);
})

router.put('/:id', async (req, res) => {
    let id = req.params.id;
    let text = req.body.text
    try {
        let results = await db.put(id, text);
        res.json(results)
    } catch (e) {
        console.log(e);
        res.sendStatus(500);
    }
    res.sendStatus(200);
})

router.post('/', async (req, res) => {
    let user = req.body.user
    let text = req.body.text
    try {
        let results = await db.post(user, text);
        res.json(results)
    } catch (e) {
        console.log(e);
        res.sendStatus(500);
    }
    res.sendStatus(200);
})

export default router;

服务器/ src目录/ DB / index.js

import mysql from 'mysql'

let pool = mysql.createPool({
    connectionLimit: 10,
    password: 'chirperapp',
    user: 'chirperapp',
    database: 'chirperapp',
    host: 'localhost',
    port: '3306'
});

let chirprdb = {};

chirprdb.all = () => {
    return new Promise((resolve, reject) => {
        pool.query('SELECT * FROM chirps', (err, results) => {
            if (err) {
                connection.end()
                return reject(err);
            }
            return resolve(results);
        })
    })
}

chirprdb.one = (id) => {
    return new Promise((resolve, reject) => {
        pool.query('SELECT * FROM chirps WHERE id = ?', [id], (err, results) => {
            if (err) {
                return reject(err);
            }
            return resolve(results[0]);
        })
    })
}

chirprdb.del = (id) => {
    return new Promise((resolve, reject) => {
        pool.query('DELETE FROM chirps WHERE id = ?', [id], (err, results) => {
            if(err) {
                return reject(err);
            }
            return resolve(results)
        })
    })
}

chirprdb.put = (id, text) => {
    return new Promise((resolve, reject) => {
        pool.query('UPDATE chirps SET text= ? WHERE id = ?', [text, id], (err, results) => {
            if (err) {
                return reject(err);
            }
            return resolve(results)
        })
    })
}

chirprdb.post = (user, text) => {
    return new Promise((resolve, reject) => {
        pool.query('INSERT INTO chirps(name, text) VALUES (?, ?)', [user, text], (err, results) => {
            if(err) {
                return reject(err)
            }
            return resolve(results)
        })
    })

export default chirperdb;