Javascript 在数组筛选时进行反应更新，但在添加元素时不进行反应更新

我试图模拟一个可以添加和删除产品的表，但是组件仅在删除组件时更新，而在添加新行时不会更新。我正在使用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函数工作正常

这是我的状态

这就是它的表现：

{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>
                            ))}

---

只有当我删除一个项目时，我添加的项目才会出现，否则它不会显示。

在React中，您应该通过将新引用传递到状态设置器来更新状态。与

let arr = rows
arr.push(obj)

您将状态设置为当前处于状态的同一数组，并对其进行变异

始终避免在反应状态下发生突变。创建新阵列并将其置于以下状态：

setRows([...rows, obj]);

---

在React中，您应该通过将新引用传递到状态设置器来更新状态。与

let arr = rows
arr.push(obj)

您将状态设置为当前处于状态的同一数组，并对其进行变异

始终避免在反应状态下发生突变。创建新阵列并将其置于以下状态：

setRows([...rows, obj]);

---

下面是一个状态突变。将元素推入现有状态数组对象并将其设置回状态不允许正确响应差异并重新渲染

let arr = rows
arr.push(obj)
setRows(arr)

解决方案是使用函数状态更新，将以前的状态粗略地复制到一个新数组中，并附加新元素

const handleAddUi = (e) => {
  let obj = createData(rows.length + 1, "test", "a", "b");
  setRows(rows => [...rows, obj]);
}

---

下面是一个状态突变。将元素推入现有状态数组对象并将其设置回状态不允许正确响应差异并重新渲染

let arr = rows
arr.push(obj)
setRows(arr)

解决方案是使用函数状态更新，将以前的状态粗略地复制到一个新数组中，并附加新元素

const handleAddUi = (e) => {
  let obj = createData(rows.length + 1, "test", "a", "b");
  setRows(rows => [...rows, obj]);
}

---

此外，请确保在删除时避免突变。您可以简单地使用“拼接”操作符，而不必过滤和设置阵列

只需使用return[…array.patchi，1]

---

此外，请确保在删除时避免突变。您可以简单地使用“拼接”操作符，而不必过滤和设置阵列

只需使用return[…array.patchi，1]