繁体   English   中英

反应POST提取请求抛出TypeError

React POST fetch request throwing TypeError

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我正在学习如何将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;
问题暂未有回复.您可以查看右边的相关问题.
1 反应本机提取TypeError:网络请求失败

我正在创建我的第一个rect本地应用程序。 使用OS11 Iphone 6模拟器在OSX上运行。 在https提取调用中获得以下错误。 使用XCode 9。 反应组件获取代码。 (这是react-native官方示例的示例代码) 我真的需要更新info.pllist来启用 ...

3 POST 请求错误抛出 404 与 node.js 服务器和反应应用程序

我正在参与 Udemy 的全栈 Web 开发人员课程的最后一个项目,但在连接我的前端和后端时遇到了困难。 我在发布登录请求时收到 404,我不知道为什么。 关于 server.js 我需要提及的事情: 没有实际的数据库,我们在同一个 server.js 文件中调用一组对象 我现在只是尝试使用 ...

4 POST请求抛出空异常

我正在写信寻求帮助,涉及通过私有方法创建POST请求。 我目前有两种方法GET和POST,它们从私有方法获取输入参数。 当我使用Fiddler调用POST方法时: Fiddler-测试POST请求:在Fiddler的composer选项卡中,我复制URL- [http://localh ...

6 反应无格式的POST请求?

我正在尝试使自己熟悉发送POST数据,这次使用React。 在这种情况下,我尝试不使用表格。 我的前端React代码具体如下所示: 为了清楚起见,我的初始stockdnum状态值为1。 同时,我的模式安排如下: 我尝试将交易编码到我的routes/user.js页面 ...

7 对 POST 请求反应 Axios ECONNRESET

我正在使用 Node 和 React.js。 使用 GET 方法向服务器发送一些东西在 fetch 和 axios 中工作正常,但是当我使用 POST 方法时,我收到以下错误: 该请求在服务器日志中可见,但不发送正文和参数。 ...

8 如何从反应表单发出 2 个 POST 请求

我已经制作了一个反应表单,并想使用表单数据向 webhook.site 发出发布请求。 如果我收到 200 状态代码,那么我想将表单数据发送到后端快速服务器以进行进一步操作。 我正在使用 axios 发出 POST 请求。 这是我的反应表单中的 axios 片段: 目前我直接向后端发送数据。 我 ...

9 反应POST请求(MERN堆栈)

在本地开发环境中进行测试时,我无法将表单数据发布到MongoDB。 我要发布到的终结点是https:// localhost:5000 / users / add,我已经能够使用REST API客户端成功将数据发布到MongoDB,并且还验证了我的前端已连接到后端。 我认为我设置表单的方式有问题,有 ...

10 从 POST 请求中提取 json dict

我想利用 Townscript 提供的 webhook 来更新模型中的 is_paid 字段。 数据格式为(a json dict):- link (在服务器通知API栏下)。 链接上的一条有用信息是: 我们将使用 post 参数数据以以下格式发送数据。 这是python代码: 上述代码中与pa ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM