首页 文章

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

提问于
浏览 次
1

这是React的学校作业 . 该应用程序有两个输入字段和一个提交按钮 . OnClick，它发送带有输入值的fetch post请求 . 没有数据库，只有存储值的JSON文件 . 请求没有错误，但JSON文件中的正文是空的 .

其他细节：React仍然在值之间渲染冒号 . 例如，它代替“Christy：Post one”而不是“：” . 输入字段正在工作;我可以在React dev工具中告诉我因为onChange他们正在更新状态 .

我试过了：

  • 将contentType更改为"application/x-www-form-urlencoded"

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

从'react'导入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默认NewChirp;

json reactjs post fetch body-parser

3 回答

  • 1

    如果您要发送的字段为空白，则道具不会正确地从父级传递回子级 . 我建议在NewChirp组件中移动inputHandler，同时保持用户和输入处于NewChirp状态 .

    回复于
  • 1

    尝试类似的东西：

    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;

    对不起，格式很糟糕，但你可能得到了要点

    回复于
  • 1

    看起来我需要的只是包装contentType：

    headers: {
            "Content-Type": "application/json"
        }
    回复于

相关问题