React fetch post 请求中的空属性和值

Question

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

其他细节：React 仍在渲染值之间的冒号。例如，它呈现“:”而不是 "Christy: Post one"。输入字段正在工作；我可以在 React 开发工具中分辨出来，因为 onChange 它们正在更新状态。

我试过：

将 contentType 更改为 "application/x-www-form-urlencoded"
在服务器中添加这些行： app.use(bodyParser.urlencoded({ extended: true }));app.use(bodyParser.json())

        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",
                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 >
            )
        }
    }


    export default 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:

            headers: {
            "Content-Type": "application/json"
        }

React fetch post 请求中的空属性和值

empty property and value in React fetch post request

post

json

fetch

reactjs

body-parser

React fetch post 请求中的空 属性 和值

empty property and value in React fetch post request

post

json

fetch

reactjs

body-parser

React fetch post 请求中的空属性和值