ES6/React 添加对象到数组

Question

如果有人能发现它，代码中的某处存在缺陷，我将不胜感激，谢谢。

步骤 1. react 表单向包含两个变量 [ email & name ] 的状态添加一条记录

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

    }

Step 2. main app.js 中 doAdd() 函数的执行

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

  }

输入值后，我的对象数组无法正常执行。 例如 allVals[0].name = blank （应该是name1 ）

这是 console.log

Answer 1

用这个

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

将 n 传递给 name-> name:n并将 e 传递给 email-> email:e 。 在这里，您的姓名和电子邮件是对象的关键，而 n,e 是值。

它类似于

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

您可以检查以更好地理解对象