Как я могу отредактировать данные формы json перед отправкой формы? - PullRequest
Новая
       7

Как я могу отредактировать данные формы json перед отправкой формы?

0 голосов
/ 23 апреля 2020

Публикация формы 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"}

Может быть, это совершенно неправильный способ? Я готов сделать эту работу или пойти другим и более эффективным путем.

Ответы [ 2 ]

1 голос
/ 23 апреля 2020

При изменении установите имя и значение события на user.body.Item, а не на user

const handleChange = (event) => {
       setUser({...user, user.body.Item[event.target.name]: event.target.value})
    }
0 голосов
/ 23 апреля 2020

Вы можете попробовать сшить полезную нагрузку вместе: 

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