我正在学习如何将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;

  ask by Christy translate from so

本文未有回复,本站智能推荐:

1回复

反应如何在ForLoop中发出POST请求

我具有以下功能,旨在删除表中的所有元素。 每行的键字段存储在具有当前内容的rowKeys ["www.google.com", "www.youtube.com", "www.facebook.com"] 以下三行将打印到控制台: 但是它不会打印两行: 它会成功删除www.goo
1回复

POST提取请求-转换为JSON

我正在尝试从React前端向php文件发出发布请求。 我收到一条错误消息,而不是通过获取请求。 Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin'
1回复

在React中,我的POST提取请求可以在桌面上运行,但不能在Chrome上的iPad上运行,这有什么问题?

此操作的目的是使用React下的fetch以JSON格式发送数据。 它适用于桌面浏览器,但不适用于iPad(Chrome 63.0.3239.73)。 操作是填写表单,单击Submit按钮,然后调用setRedirect函数并执行下面的代码。 即使在找了几个小时后,我找不到解决方案....
1回复

继续通过POST请求获得400(错误请求)

因此,我正在尝试向已建立的数据库发出请求。 关键是要发送一个POST以添加到表中,并将其反馈给我完整的列表。 我继续在控制台中收到“ POST http:// localhost:8000 / api / folders 400(错误请求)”。 我知道这是POST,就像我在DBeaver和POSTm
1回复

如何通过react.js发出POST请求?

我正在尝试通过反应发出POST请求,但我收到错误。如果有任何身体知道帮助我,请帮助我,我必须改变。 错误是:{timestamp:1510396949738,status:415,error:“Unsupported Media exception:”org.springframework.
1回复

反应POST表单获取但未定义的数据

大家,这是我的第一个问题,对于这个不好的问题很抱歉,但我是 REACT 的新手。 我正在自己尝试但不起作用这是我从 fetch 发来的帖子 } 这是我的服务器,我不知道为什么它无法从 react 中读取数据 }); 结果 [来自帖子的结果][3] 会发生什么? 为什么当我将数据发布到服务器时服务
3回复

使API通过Async/Await提取“POST”的正确方法

我正在处理一个需要我向 API 发出请求的项目。 使用 Async/Await 发出 POST 请求的正确形式是什么? 例如,这是我获取所有设备列表的方法。 我将如何将此请求更改为 POST 以创建新设备? 我知道我必须添加一个带有数据体的标题。
1回复

fetch()POST请求,数据成为对象键[重复]

这个问题已经在这里有了答案: 提取:POST json数据 11个答案 是否有人在发送POST提取请求时遇到问题,其中JSON字符串成为接收端的对象密钥,特别是使用{ "Content-Type": "application/x-www-form-urlencoded" }作为