正在从DOM显示中删除项(React)

Question

到目前为止页面的示例图像

请参阅上图。我希望能够在点击右侧的"删除"按钮后删除"技能"列中的字符串。我可以使用filter((和左侧的delete按钮删除员工。这将从DOM中删除整行，这很好，但我希望右侧的Delete按钮可以简单地从该特定员工的Skill(s(列中删除内容。

我曾尝试在deleteSkill((函数中执行类似的操作，但我不确定如何在不删除整行的情况下删除Skill列的内容。问题在于deleteSkill((函数中的setList((函数。任何想法都将不胜感激。

这是代码：

import React, { Fragment, useEffect, useState } from 'react';
const List = () => {
const [list, setList] = useState([]);
//DELETE Employee by ID
const deleteEmployee = async (id) => {
try {
const deleteEmployee = await fetch(`http://localhost:5000/employees/${id}`, {
method: "DELETE"
});
setList(list.filter(item => item.employee_uuid !== id));
} catch (err) {
console.error(err.message)
}
};
//DELETE Skill by ID
const deleteSkill = async (id) => {
try {
const deleteSkill = await fetch(`http://localhost:5000/employees/${id}/skills`, {
method: "DELETE"
});
setList(list.filter(item => item.summary !== id));
} catch (err) {
console.error(err.message)
}
};
const getList = async () => {
try {
const response = await fetch("http://localhost:5000/employees")
const jsonData = await response.json();
setList(jsonData);
} catch (err) {
console.error(err.message);
}
};
useEffect(() => {
getList();
}, []);
console.log(list);
return (
<Fragment>
{" "}
<h1 class="text-center">Employee Skills Tracker</h1>
<table class="table mt-5 text-center">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th></th>
<th></th>
<th>Skill(s)</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
{list.map(item => (
<tr key={item.employee_uuid}>
<td>{item.firstname}</td>
<td>{item.lastname}</td>
<td>Edit</td>
<td><button className="btn btn-danger" onClick={() => deleteEmployee(item.employee_uuid)}>Delete</button></td>
<td>{item.summary}</td>
<td>Edit</td>
<td><button className="btn btn-danger" onClick={() => deleteSkill(item.employee_uuid)} >Delete</button></td>
</tr>
))}
</tbody>
</table>
</Fragment>
);
};
export default List;

Answer 1

不要使用list.filter()，而是使用list.map()。关键是您希望返回修改过的元素的1:1列表，而不是没有某些元素的列表。

如果你只想删除特定员工的摘要，我建议

setList(list.map(item => {
if (item.id !== id) {
return item; // not the right employee, pass it through
}
let newItem = {...item};
delete newItem.summary;
return newItem;
}));

这更复杂，因为你必须明确地返回你想要的，但这也是你想要的。