Question

我有一个带有可编辑行的react表，其中包含一个自定义表单组件。当向表中添加或删除新行时，MyForm会重建在下新行或已删除的行，但如果在上面，则不会重建。这是一个澄清......的例子。

示例A，良好案例：

时间1：

<tr key="1"><td>one</td></tr> <tr key="2"><td>two</td></tr> <tr key="edit"><td><MyForm/></td></tr> <tr key="3"><td>three</td></tr> // <--- this row will be removed @ time2

时间2：

<tr key="1"><td>one</td></tr> <tr key="2"><td>three</td></tr> <tr key="edit"><td><MyForm/></td></tr>

在这种情况下，MyForm组件没有重建，并且其本地状态没有被消除。这就是我想要的。

示例B，错误案例：

时间1：

<tr key="1"><td>one</td></tr> <tr key="2"><td>two</td></tr> // <--- this row will be removed @ time2 <tr key="edit"><td><MyForm/></td></tr> <tr key="3"><td>three</td></tr>

时间2：

<tr key="1"><td>one</td></tr> <tr key="edit"><td><MyForm/></td></tr> <tr key="3"><td>three</td></tr>

MyForm重建，我的当地国家遭到重创。这很糟糕，因为我可能会对字段进行编辑。我的理解是reactjs不应该重建不需要更新的组件，而是用键处理。为什么MyForm只是因为它之前的兄弟姐妹被改变而被重建？

Answer 1

您可以通过实施https://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate

来阻止组件重新呈现

然而，无论你的组件是否被重新渲染，它都不应该松散状态，但是在形式的情况下，除非你应用https://facebook.github.io/react/tips/controlled-input-null-value.html

，否则它们自己的状态并不总是由反应控制。

Answer 2

原来这是一个Object vs Array输入问题，我在渲染调用中构建行

应该是什么 [对象，对象，对象]

当时 [Array [2]，Object]

因此：

let tableRows = rows.map(row=>{
    let tdRow = <tr key={row.id}></tr>
    if(this.state.editId === row.id) {
      return [tdRow , <tr key={row.id + '_edit'}><MyForm/></td>]
    }
    else {
      return tdRow 
    }
})

return <table><tbody>{tableRows}</tbody></table>;

课程是：不要从地图调用中返回一个数组

如何防止表行在更新时重建

2 个答案: