反應POST提取請求拋出TypeError

Question

我正在學習如何將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;