如何在提交表单之前编辑表单 json 数据？答案

【问题标题】：How can I edit form json data before submitting a form?如何在提交表单之前编辑表单 json 数据？
【发布时间】：2020-04-23 01:09:10
【问题描述】：

发布 React 表单通常很简单。但是，在将有效负载发送到此特定端点之前，我需要对其进行自定义。我需要它看起来像这样：

{
    "httpMethod": "POST",
    "body": {
        "TableName": "Users",
        "Item": {
            "email": "sasquatch@bigfoot.com",
            "first_name": "Sasquatch",
            "last_name": "Bigfoot"
        }
}

这是我现在的，但格式不正确：

const CreateUser = () => {

    const [user, setUser] = useState({
        'httpMethod': 'POST',
        'body': {
            'TableName' : 'Users',
            'Item' : { 
                email: '', first_name: '', last_name: ''
            }
        }
    });

    const handleChange = (event) => {
        setUser({...user, [event.target.name]: event.target.value})
    }

    const url = 'https://aaaaaaa.execute-api.us-east-1.amazonaws.com/dev/';

    const handleSubmit = (e) => {

        e.preventDefault()

        axios.post(url, user)
          .then(function (response) {
              console.log(response)
          })
          .catch(function (error) {
              console.log(error)
          }) 
    }

    return (

        <div className="container">
            <form className='white' onSubmit={handleSubmit}>
                <h5 className="grey-text.text-darken-3">Create User</h5>                        
                <div className="input-field">
                    <label htmlFor="email">Email</label>
                    <input type="text" name="email" value={setUser.email} onChange={handleChange} required />
                </div>
                <div className="input-field">
                    <label htmlFor="first_name">First Name</label>
                    <input type="text" name="first_name" value={setUser.first_name} onChange={handleChange} required />
                </div>
                <div className="input-field">
                    <label htmlFor="last_name">Last Name</label>
                    <input type="text" name="last_name" value={setUser.last_name} onChange={handleChange} required />
                </div>
                <div className="input-field"> 
                    <button className="btn blue darken-3" type="submit">Sign Up</button>
                </div>
            </form>
        </div>
    );
}

当我在调试器中找到数据时，它看起来像这样：

{
    "httpMethod":"POST",
    "body": {
        "TableName":"Users",
        "Item": {
            “email":"",
            "first_name":"",
            "last_name":""
            }
        },
            "email":"sasquatch@bigfoot.com",
            "first_name":"Sasquatch",
            "last_name":"Bigfoot"}

也许这是完全错误的做法？我愿意做这项工作或走一条不同的更有效的路线。

【问题讨论】：

为什么不在handleSubmit 函数中处理用户对象，然后再将其传递给post？
我对此持开放态度。事实上，这是我最初的尝试。但是，我仍然不确定如何将静态 json 与表单数据拼接在一起。

标签： reactjs axios

【解决方案1】：

更改时，将事件名称和值设置为user.body.Item 而不是user

const handleChange = (event) => {
       setUser({...user, user.body.Item[event.target.name]: event.target.value})
    }

【讨论】：

【解决方案2】：

您可以尝试这样将有效载荷拼接在一起：

const handleSubmit = (e) => {
        var payload = {
            httpMethod: "POST",
            body: {
                TableName: "Users",
                Item: {
                    email: user.email,
                    first_name: user.first_name,
                    last_name: user.last_name
                }
            }

        e.preventDefault()

        axios.post(url, payload)
          .then(function (response) {
              console.log(response)
          })
          .catch(function (error) {
              console.log(error)
          }) 
    }

【讨论】：