在 react.js 中，更新的 state 值未顯示在表格列表中（表格列表使用 state 值）

Question

我只是做了一個表格來顯示客戶的電子郵件，並添加了刪除或添加新電子郵件的功能。 但是為了添加 function，我將新的 email 保存到狀態（ users ）中。 但它沒有顯示在 email 表列表中。 刪除 function 效果好嗎？ 你能幫我解決這個問題嗎？ 剛剛附上了我的代碼

import React, {useState} from 'react';

const Admin: NextPage = () => {

  const [users, setUsers] = useState([
    { email: "tomer@everything420.com" },
    { email: "roman.garilov.0309@gmail.com"},
  ]);

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

  const removeUser = rowEmail => {
    const updatedArray = users.filter((row) => row.email !== rowEmail);
    setUsers(updatedArray);
  }

  const addUser = () => {
    console.log(email);
    const lists = users;
    lists.push({'email' : email});
    setUsers(lists);
  }
  
  return (
    <>
    <div className="user-user">
      <input type="email" onChange={event => setEmail(event.target.value)} />
      <span onClick={() => addUser()}>Add User</span>
    </div>
    <div className="user-list">
      <table>
        <thead>
          <tr>
            <th>Users</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          {users.map((val, key) => {
            return (
              <tr key={key}>
                <td>{val.email}</td>
                <td><span onClick={() => removeUser(val.email)}>Remove</span></td>
              </tr>
            )
          })}
        </tbody>
      </table>
    </div>
    </>
  );
}
  
export default Admin;

Answer 1

行const lists = users; 不創建新數組。 它只是創建一個指向同一個數組的新變量。 所以lists.push({'email': email}); 將突變 state，但以某種方式反應不會引起注意。

利用

const lists = [...users];