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

我有一个react表，其中包含一个自定义表单组件的可编辑行。在表中添加或删除新行时，如果MyForm位于新行或删除行的下方，则会重新生成，如果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

<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>

1
二
三个//可以通过实现

但是，无论组件是否重新呈现，它都不应处于松散状态，但对于表单，它们自己的状态并不总是由react控制，除非应用此
，否则可以通过实现

但是，无论组件是否重新呈现，它都不应失去状态，但对于窗体，它们自己的状态并不总是由react控制，除非应用此方法。
事实证明，这是一个对象与数组类型的问题，与我如何在呈现调用中构建行有关

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

是
[数组[2]，对象]

因此：

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>;

let tableRows=rows.map（row=>{
设tdRow=
if（this.state.editId==行.id）{
返回[tdRow，]
}
否则{
返回tdRow
}
})
返回{tableRows}；

教训是：不要从映射调用返回数组
事实证明，这是一个对象与数组类型的问题，与我如何在渲染调用中构建行有关

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

是
[数组[2]，对象]

因此：

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>;

let tableRows=rows.map（row=>{
设tdRow=
if（this.state.editId==行.id）{
返回[tdRow，]
}
否则{
返回tdRow
}
})
返回{tableRows}；

教训是：不要从map call返回数组
谢谢！shouldcomponentupdate确实会阻止重建，但我没有传递正确的信息，因为它是不应该首先重建它的父组件。在这种情况下，家长有责任不殴打孩子。谢谢！shouldcomponentupdate确实会阻止重建，但我没有传递正确的信息，因为它是不应该首先重建它的父组件。在这种情况下，由父节点决定是否对子节点进行重击。因此，我确信解决这个问题的最佳方法是jsx，因为每个变量都需要一个根dom节点，对吗？当到达编辑行时，我想从map调用返回两个标记。我将map更改为forEach，并将dom节点追加到数组中。最好不要使用map如果你没有为迭代列表返回1:1数量的东西，那么我确信解决这个问题的最好方法是，因为jsx要求每个变量都有一个根dom节点，对吗？当到达编辑行时，我想从map调用返回两个标记。我将map更改为forEach，并将dom节点追加到数组中。如果没有为迭代列表返回1:1数量的内容，最好不要使用map
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>;