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
};

您可以檢查以更好地理解對象