从表中删除行不起作用的行

Question

我有一个从此数据

const[formValues,setFormValues] = useState({
sCode:undefined,
sName:undefined,
mList:[{
    sym:"abc",
    minLimit:undefined,
    maxLimit:undefined
},
{
    sym:"xyz",
    minLimit:undefined,
    maxLimit:undefined
}]  });

行呈现的表可以从表中删除行，如果我仅删除最后一行，则每次从页面上的表中删除每次删除，但是状态正在完美更新，即从数据中删除了正确的行（mlist） ）。我应该如何纠正它？

const removeRow=(index)=>{
    let Rows = [...formValues.mList];
    Rows.splice(index,1);
    setFormValues({...formValues,mList:[...Rows]})   
}

表代码：

<Table striped  >
<thead>
 <tr><th>S No</th><th>Sym</th><th>Min Limit</th><th>Max Limit</th></tr>
</thead>
<tbody>
    {formValues.mList.map((input,index)=>(
        <tr key={"table-"+index}>
            <td>{index+1}</td>
            <td><TextareaComp id={'mList'+ index+ 'sym'} required={false} name="sym" value={input.sym} onBlur={(evnt)=>(handleTableChange(index, evnt))} /></td>
            <td><TextBoxComp id={'mList'+ index+ 'minLimit'} type="text"  required={false} name="minLimit" value={input.minLimit} onBlur={(evnt)=>(handleTableChange(index, evnt))} /></td>
            <td><TextBoxComp id={'mList'+ index+ 'maxLimit'} type="text"  required={false} name="maxLimit" value={input.maxLimit}  onBlur={(evnt)=>(handleTableChange(index, evnt))} /></td>
            <td><button type="button" className="fa fa-minus btn btn-danger"   onClick={()=>removeRow(index)}></button></td>
        </tr>
     ))}
</tbody>

Answer 1

问题在于，您将映射的数组索引用作React键的一部分，即key = {“ table-” + index}。

当您从数组中间删除一行时，例如索引3，向前移动后元素的所有索引，并且由于 仍然存在 index 3处的元素映射时，将分配react key key = {“ table-” + 3}，或“ table-3”。 React检查当前渲染周期映射索引的钥匙值与上一个渲染循环所使用的密钥，并且因为它们在恢复任何内容时都是相同的React保释金。您正在看到formValues.mlist数组的效果短，这就是为什么您会看到删除最后一个元素的原因，react耗尽了元素以渲染并将键分配给。

使用对其代表的数据进行固有的反应键值或“粘性”。通常，您将使用任何独特的属性。例如，如果sym属性在fieldValues.mlist数组数据集中是唯一的，则将被用作React键。

示例：

{formValues.mList.map((input, index) => (
  <tr key={"table-" + input.sym}> // "table-abc", "table-xyz", etc
    <td>{index+1}</td>
    <td>
      <TextareaComp
        id={'mList' + index + 'sym'}
        required={false}
        name="sym"
        value={input.sym}
        onBlur={(evnt) => handleTableChange(index, evnt)}
      />
    </td>
    <td>
      <TextBoxComp
        id={'mList' + index + 'minLimit'}
        type="text"
        required={false}
        name="minLimit"
        value={input.minLimit}
        onBlur={(evnt) => handleTableChange(index, evnt)}
      />
    </td>
    <td>
      <TextBoxComp
        id={'mList' + index + 'maxLimit'}
        type="text"
        required={false}
        name="maxLimit"
        value={input.maxLimit}
        onBlur={(evnt) => handleTableChange(index, evnt)}
      />
    </td>
    <td>
      <button
        type="button"
        className="fa fa-minus btn btn-danger"
        onClick={() => removeRow(index)}
      />
    </td>
  </tr>
))}

如果sym属性不是唯一的，并且没有其他合适的属性，那么我建议将GUID注入您的mList数组数据。为此， uuid 软件包非常适合生成全球唯一的标识符。

示例：

import { v4 as uuidV4 } from 'uuid';

...

const fetchData = () => {
  const mListData = fetch(......);
  const mListDataWithGuid = mListData.map(el => ({
    ...el,
    id: uuidV4(), // <-- inject GUID value
  }));
};

...

{formValues.mList.map((input, index) => (
  <tr key={"table-" + input.id}> // "table-lksdlk-0234lknsf-wef", etc
    <td>{index+1}</td>
    <td>
      <TextareaComp
        id={'mList' + index + 'sym'}
        required={false}
        name="sym"
        value={input.sym}
        onBlur={(evnt) => handleTableChange(index, evnt)}
      />
    </td>
    <td>
      <TextBoxComp
        id={'mList' + index + 'minLimit'}
        type="text"
        required={false}
        name="minLimit"
        value={input.minLimit}
        onBlur={(evnt) => handleTableChange(index, evnt)}
      />
    </td>
    <td>
      <TextBoxComp
        id={'mList' + index + 'maxLimit'}
        type="text"
        required={false}
        name="maxLimit"
        value={input.maxLimit}
        onBlur={(evnt) => handleTableChange(index, evnt)}
      />
    </td>
    <td>
      <button
        type="button"
        className="fa fa-minus btn btn-danger"
        onClick={() => removeRow(index)}
      />
    </td>
  </tr>
))}

其他建议

我通常建议避免使用array.protype.splice，因为它会突变其操作的数组。您应该使用功能状态更新来正确更新任何以前的状态，并使用唯一的字段属性而不是索引从数组中删除元素。使用array.prorotype.filter从数组 和 返回新数组参考。

示例：

const removeRow = (sym) => {
  setFormValues(formValues => ({
    ...formValues,
    mList: formValues.mList.filter(el => el.sym !== sym)
  }));
};

将唯一标识符传递给回调：

<button
  type="button"
  className="fa fa-minus btn btn-danger"
  onClick={() => removeRow(input.sym)}
/>