在使用数组过滤器时进行更新,但在添加元素时不进行更新 [英] React updating when array filters but not when an element is added
问题描述
我正在尝试模拟一个可以添加和删除产品的表,但是该组件仅在删除组件时更新,而在我添加新行时不更新.我正在使用 useState
I'm trying to simulate a table where I am able to add and remove products, however the component only updates when component is removed but not when I add a new row. I'm using useState
这是我的数组:
const rowss = [
createData(1, 'Zapatillas', 2, 200),
createData(2, 'Chompas', 2, 100),
createData(3, 'Sandalias', 10, 300),
createData(4, 'Teclados', 1, 10),
createData(5, 'Mascarillas', 10, 2000),
createData(6, 'Celulares', 1, 200),
createData(7, 'Vasos', 20, 1000),
];
createData函数运行正常.
The createData function is working fine.
这是我的 useState
const [rows, setRows] = useState(rowss)
const handleDelete = (e, id) => {
let arr = rows.filter(obj => obj._id !== id)
setRows(arr)
}
const handleAddUi = (e) => {
let obj = createData(rows.length + 1, "test", "a", "b")
let arr = rows
arr.push(obj)
setRows(arr)
}
这是它的显示方式:
{rows.map((row) => (
<TableRow key={row._id}>
<TableCell component="th" scope="row">
{row.product}
</TableCell>
<TableCell align="center">{row.tr}</TableCell>
<TableCell align="center">{row.mp}</TableCell>
<TableCell align="center">
{
!editActions[row._id] ?
<Fragment>
<CheckIcon className={classes.products__actionButtonsIcons} />
<CloseIcon className={classes.products__actionButtonsIcons} onClick={(e) => handleEdit(e, row._id)} />
</Fragment>
:
<CreateIcon className={classes.products__actionButtonsIcons} onClick={(e) => handleEdit(e, row._id)} />
}
</TableCell>
<TableCell className={classes.products__actionButtonsIcons} align="center" onClick={(e) => handleDelete(e, row._id)}><DeleteIcon /></TableCell>
</TableRow>
))}
仅当我删除一项时,才会显示我添加的项,否则不会显示.
Only when I delete an item the one that I added appears, otherwise it doesn't show.
推荐答案
在React中,您应该通过将 new 引用传递给状态设置器来更新状态.与
In React, you should update state by passing a new reference into the state setter. With
let arr = rows
arr.push(obj)
您要将状态设置为与当前状态相同的数组,并对其进行突变.
you're setting the state to the same array that's currently in state, and mutating it.
始终避免使用React状态进行突变.创建一个新数组并将其置于状态:
Always avoid mutation with React state. Create a new array and put it into state instead:
setRows([...rows, obj]);
这篇关于在使用数组过滤器时进行更新,但在添加元素时不进行更新的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!