Question

这是一个React学校的作业。该应用程序有两个输入字段和一个提交按钮。 OnClick，它将发送带有输入值的提取后请求。没有数据库，只有存储值的JSON文件。请求顺利进行，但JSON文件中的正文为空。

其他详细信息：React仍在值之间渲染冒号。例如，代替“ Christy：Post one”，它呈现“：”。输入字段正在工作；我可以在React开发工具中告诉我们，因为onChange正在更新状态。

我尝试过：

将contentType更改为“ application / x-www-form-urlencoded”

在服务器中添加以下行： app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json())

从'react'导入React，{组件};

NewChirp类扩展了组件{ constructor（）{ 超（）; this.state = { 用户：“”，文字：“” } 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",
        contentType: "application/json; charset=utf-8",
        // contentType: "application/x-www-form-urlencoded",
        body: JSON.stringify({
            user: this.state.user,
            text: this.state.text,
        })
    })
        .catch(err => console.log(err))
}

render() {
    return (
        <div>
            <div className="input"></div>
            <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 >
    )
}

} 导出默认的NewChirp;

Answer 1

如果您要发送的字段空白打印，则说明道具没有从父项正确传递回子项。我建议在NewChirp组件中移动inputHandler，并将用户和输入也保持在NewChirp的状态。

Answer 2

尝试类似的方法：

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({
        user: e.target.user,
        text: e.target.text
        });
    }

    fetchChirps() {
    fetch('http://127.0.0.1:3000/api/chirps/', {
        method: "POST",
        contentType: "application/json; charset=utf-8",
        // contentType: "application/x-www-form-urlencoded",
        body: JSON.stringify({
            "user": this.state.user,
            "text": this.state.text,
        })
    })
        .then(response => console.log(response))
        .catch(err => console.log(err))
}

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

抱歉，格式很糟糕，但您可能会明白要点

Answer 3

我所需要做的就是包装contentType：

$("#table").append("<tr> <td> " + response.data[i].user_email + " </td> <td> " + response.data[i].booking_number + " </td> <td> " + response.data[i].booking_address + " </td> <td> " + response.data[i].booking_date + " </td> <td> " + response.data[i].booking_message + " </td> <td> " + response.data[i].request_date + " </td> <td> " + response.data[i].chosen_emails_1 + " </td> <td> " + response.data[i].chosen_emails_2 + " </td> <td> " + response.data[i].chosen_emails_3 + "</td> </tr>");

React Fetch Post请求中的属性和值为空

3 个答案: