ES6 / React добавление объекта в массив

Question

Где-то в коде есть изъян, если кто-то может его заметить. Я был бы признателен за помощь, спасибо.

Шаг 1. Форма реагирования для добавления записи в состояние, содержащее две переменные [ электронная почта & имя ]

    export const AddForm = (props) => {

         const [ name, setName ] = useState('')
         const [ email, setEmail ] = useState('');

         return (
              <div>
                    Name:
                   <input type="text" 
                           id="name" 
                           onChange={ (event)=> { setName(event.target.value) }} /><br />
                   Email:
                   <input type="email" 
                           id="email" 
                           onChange={ (event)=> { setEmail(event.target.value) }}/><br />
                   <button type="button" 
                           onClick={ ()=> { props.doAdd(name,email) } } >Add</button>
              </div>
         )

    }

Шаг 2. Выполнение функции doAdd () внутри основного приложения. js

  const doAdd = (name,email) => {
    var newData = '{"name":'+name+',"email":'+email+'}';
    setAllVals([...allVals,newData]);

  }

после ввода значений мой массив объектов не работает должным образом. например, allVals [0] .name = пусто (должно быть name1)

здесь console.log

Answer 1

Используйте это

const doAdd = (n,e) => {
    var newData = {name:n,email:e};
    setAllVals([...allVals,newData]);
  }

, чтобы передать n на имя-> name:n и e на электронную почту-> email:e. здесь ваше имя и адрес электронной почты являются ключом объекта, а n, e являются значениями.

Это похоже на

var objExample = {
    key1: value1,
    key2: value2
};

, которое вы можете проверить для лучшего понимания Объекты