Javascript 如何在物料界面中插入新行？

我正在开发一个联系人应用程序，其中所有数据都临时存储在客户端。我使用了MaterialUI表来显示联系人

---

单击右下角的“添加新联系人”按钮时，将显示一个对话框，其中包含一个表单。单击“保存”按钮时，数据将保存在状态中。但我面临的问题是如何在表中插入包含表单数据的新行。我搜索了它，但我甚至找不到关于同一个问题的任何查询。添加新联系人按钮位于

AddContact

组件中，表位于

Contacts

组件中，但两者都具有相同的父组件，即

Main

。简而言之，我无法在表中显示新联系人。

在

状态

变量中维护一个

数组

，当您单击对话框中的提交时，将该数据推送到

状态数组

。使用

数组

动态生成行，如下所示：

<Table>
    <TableHeader>
        <TableRow>
            /*Define the headers*/
        </TableRow>
    </TableHeader>
    <TableBody>
        {this._generateRows()}
    </TableBody>
</Table>

参考文献：

---

注意：用原始数据替换el.a、el.b、el.c。

我看到您正在使用react。这意味着当您将项目列表绑定到 渲染函数中的行组件

{list.map(item => <RowComponent key={item.id}/>)}

{list.map（item=>）}

---

现在，当你点击按钮时，你所要做的就是把

推到这个列表，你的新行就会显示在屏幕上。
你能给我们提供组件结构吗？@sudobangbang我已经在我的问题中提到了组件的结构。请不要直接改变状态变量，例如用
推
。使用组件或状态管理库可以避免组件完全不呈现或以旧状态呈现的问题。您是正确的。重新创建阵列时，React最有效。因此，在推送时，可以首先克隆阵列。例如，使用splice（），然后推送该项。或者使用像Redux这样的库，但是在添加项之前还应该创建数组的新副本。React的更改检测机制检查给定对象的引用，如果它们是相同的React，则会将其视为未更改。
{list.map(item => <RowComponent key={item.id}/>)}