这里是所有维护的状态,
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中删除数据时,它才不会 按预期回应。
我发现你的代码有什么问题
你的
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 值,但您删除的值除外,因为它将被过滤。