反应钩子 从数组中删除项目

Question

在我的反应钩子组件中，我正在渲染来自对象数组的数据。

const lineInfo = [
{
id: '001',
line: 's-1125026',
arrival: '7:30',
departure: '8:00',
authorization: 'User 1',
},
{
id: '002',
line: 's-1125027',
arrival: '8:01',
departure: '8:50',
authorization: 'User 1',
},

在.map()中，我使用此数据返回数据：

<div>
{lineInfo.map((line) => (
<Row key={`line_${line.id}`}>
// remaining code removed for length

列表返回正常，所以现在我正在尝试从列表中删除一行。删除功能

const [list, setList] = useState(lineInfo);
function handleRemove(id) {
console.log('id' id);
const newList = list.filter((line) => line.id !== id);
setList(newList);
}

"删除"按钮

<Button
className={style.close_button}
onClick={() => handleRemove(line.id)}
>
<img src={close} alt="trash" />
</Button>
</Row>

我遇到的问题是，在我的控制台日志中，只有 line.id 从数组中删除，而不是整行数据。

1. 如何删除属于特定 id 的所有数据？
2. 即使控制台日志显示文本已删除，为什么行中显示的文本未从视图中删除？

我对钩子不太熟悉，只能找到我在类组件方面的特定问题的示例。提前谢谢。

Answer 1

您应该使用钩子显示定义的状态。 在这种情况下是list，而不是lineInfo。

<div>
{list.map((line) => (
<Row key={`line_${line.id}`}>
// remaining code removed for length

Answer 2

你不应该渲染 lineInfo，而是从本地状态渲染列表：

const { useState, useCallback } = React;
const lineInfo = [
{
id: '001',
line: 's-1125026',
arrival: '7:30',
departure: '8:00',
authorization: 'User 1',
},
{
id: '002',
line: 's-1125027',
arrival: '8:01',
departure: '8:50',
authorization: 'User 1',
},
];
//make row pure component using React.memo
const Row = React.memo(function Row({ item, remove }) {
return (
<div>
<pre>{JSON.stringify(item, undefined, 2)}</pre>
<button onClick={() => remove(item.id)}>
remove
</button>
</div>
);
});
const App = () => {
const [list, setList] = useState(lineInfo);
//make remove a callback that is only created
//  on App mount using useCallback with no dependencies
const remove = useCallback(
(removeId) =>
//pass callback to setList so list is not a dependency
//  of this callback
setList((list) =>
list.filter(({ id }) => id !== removeId)
),
[]
);
return (
<ul>
{list.map((line) => (
<Row
key={`line_${line.id}`}
item={line}
remove={remove}
/>
))}
</ul>
);
};
ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

<div id="root"></div>