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

Posted 2023-02-22

【中文标题】React fetch post 请求中的空属性和值

【英文标题】：empty property and value in React fetch post request

【发布时间】：2019-02-26 04:37:38

【问题描述】：

这是一个 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())

        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;

【参考方案1】：

看起来我只需要包装 contentType：

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

【参考方案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;

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

【讨论】：

通过这些更改，我收到一条新的错误消息：bundle.js:2603 警告：组件正在将文本类型的受控输入更改为不受控制。输入元素不应从受控切换到不受控（反之亦然）。决定在组件的生命周期内使用受控输入元素还是不受控输入元素。

我在父节点上的初始 inputHandler 看起来像这样 inputHandler(e) this.setState( [event.target.name]: event.target.value )

在输入中我将“value”更改为“defaultValue”，这似乎解决了控制问题。但现在我回到了原来的问题；发布请求中的空正文。

【参考方案3】：

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

【讨论】：

这是有道理的，因为状态中的用户和文本仅在此子组件中使用。但是，移动它们之后，响应是相同的:(