表 2 的删除处理程序未按预期工作

Question

这里是所有维护的状态，

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

  const [data, setData] = useState([]);  //TABLE 1
  const [dataTwo, setDataTwo] = useState([]);  //TABLE 2

需要使用“添加”按钮创建包含姓名、年龄、电子邮件的表单

        <form onSubmit={submitHandler}>
          <div>
            <label>Name</label>
            <input type="text" onChange={nameHandler} value={name}></input>
          </div>
          <div>
            <label>Email</label>
            <input type="email" onChange={emailHandler} value={email}></input>
          </div>
          <div>
            <label>Phone No</label>
            <input type="text" onChange={phoneHandler} value={phoneno}></input>
          </div>
          <div>
            <button type="submit">Add</button>
          </div>
        </form> 

当按下ADD按钮时，数据将被传输到表1

表1有内容和删除按钮，

   <div>
       <h2>Table 1</h2>
     </div>
     <div>
       <ul>
         {data.map((item) => (
           <div>
             <li>
               {item.name} - {item.email} - {item.phoneno}{' '}
               <button onClick={() => deleteTableOneHandler(item)}>
                 Delete
               </button>
             </li>
           </div>
         ))}
       </ul>
     </div> 

const deleteTableOneHandler = (deleteitem) => {
 setData(data.filter((item) => item !== deleteitem));
 setDataTwo((value) => [...value, deleteitem]);
};

当按下删除按钮时，表1中的数据将被添加到表2中， 并且表1中的数据被删除

同样，当表2中删除数据时，数据将被添加回表1

      <div>
          <h2>Table 2</h2>
        </div>
        <div>
          <ul>
            {dataTwo.map((item) => (
              <div>
                <li>
                  {item.name} - {item.email} - {item.phoneno}{' '}
                  <button onClick={() => deleteTableTwoHandler(item)}>
                    Delete
                  </button>
                </li>
              </div>
            ))}
          </ul>
        </div>

    const deleteTableTwoHandler = (deleteitem) => {
    setDataTwo(data.filter((item) => item !== deleteitem));
    setData((value) => [...value, deleteitem]);
  };

一切都按要求工作，只有当我从表2中删除数据时，它才不会 按预期回应。

Answer 1

我发现你的代码有什么问题

问题

你的

deleteTableTwoHandler

有一个逻辑错误

const deleteTableTwoHandler = (deleteitem) => {
    setDataTwo(data.filter((item) => item !== deleteitem)); // Here is the problem
    setData((value) => [...value, deleteitem]);
};

解决方案

const deleteTableTwoHandler = (deleteitem) => {
    setDataTwo(dataTwo.filter((item) => item !== deleteitem)); // data => dataTwo
    setData((value) => [...value, deleteitem]);
};

---

解释一下

data

包含表1中的所有数据，因此当您按表2中的删除按钮时，

data.filter

将循环表1中的所有数据，即使它不是在 表 2 中，因此 表 2 将包含所有 表 1 值，但您删除的值除外，因为它将被过滤。