React:无法过滤组件列表

Question

我试图有一个表字段的列表，可以随时添加和删除。

只要我点击删除中间的任何元素(最后一个除外)，它就会删除它下面的所有项

代码在这里

我不确定是什么做错了，它删除了所有的元素，即使我试图删除一个特定的

---

此处也添加代码

import React, { useState } from 'react';
import { v4 as uuidv4 } from 'uuid';
const ListComponent = ({ remove, id }) => {
return (
<tr>
<td>
<input />
</td>
<td><button onClick={() => remove(id)}>Delete</button></td>
</tr>
)
}
const App = () => {
const [array, setArray] = useState([]);
const remove = (itemId) => {
setArray(array.filter(each => each.id !== itemId))
}
const addListComponent = () => {
let id = uuidv4();
setArray(oldArray => [...oldArray, {
id,
jsx: <ListComponent key={id} id={id} remove={remove}/>
}])
}
return (
<div>
<button onClick={addListComponent}>Add ListComponent</button>
{array.length > 0 && array.map(each => each.jsx)}
</div>
)
}
export default App;

Answer 1

问题是每次创建新元素时，都会根据当前状态创建新的remove函数。当您创建一个元素时，您创建了一个jsx，其中remove指向特定于时间的array引用。

你可以修改你的remove函数像这样:

const remove = (itemId) => {
setArray(prevArr => prevArr.filter(each => each.id !== itemId))
}

，这将确保您始终拥有对当前状态的正确引用。

虽然这解决了问题，但我建议遵循指导原则，仅在您的状态下存储必要的信息，并在渲染时将其传递给JSX。

const App = () => {
const [array, setArray] = useState([]);
const remove = (itemId) => {
setArray(array.filter(each => each.id !== itemId))
}
const addListComponent = () => {
let id = uuidv4();
setArray(oldArray => [...oldArray, { id }])
}
return (
<div>
<button onClick={addListComponent}>Add ListComponent</button>
{array.length > 0 && array.map(({ id }) => <ListComponent key={id} id={id} remove={remove}/>)}
</div>
)
}