Question

发布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"}

也许这是完全错误的解决方法？我愿意进行这项工作，也可以采取其他更有效的方法。

Answer 1

更改时，将事件名称和值设置为user.body.Item上的user

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

Answer 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)
          }) 
    }

提交表单之前，如何编辑表单json数据？

2 个答案: