React中点击按钮在表格当前行下方插入重复行的实现问题

实现方案 #

直接利用Array.map回调的第二个参数获取当前行的动态索引，同时修正列表key避免重复行渲染异常即可，修改后的代码如下：

1. 优化复制行逻辑

const copy = (index: number) => {
  const targetRow = response[index];
  // 给复制行生成唯一的证书编号，避免后续编辑、删除等业务逻辑冲突，可按自身业务规则调整
  const duplicatedRow = {
    ...targetRow,
    certificateNo: `${targetRow.certificateNo}_copy_${Date.now()}`
  };
  // 插入到当前点击行的下一位
  const newData = [
    ...response.slice(0, index + 1),
    duplicatedRow,
    ...response.slice(index + 1)
  ];
  setResponse(newData);
};

2. 修改表格渲染代码

{response.map((certificate: Certificate, index: number) => {
  return (
    // key改为证书号+索引的组合，保证全局唯一，避免重复行渲染异常
    <tr key={`${certificate.certificateNo}-${index}`}>
      <td>{certificate.certificateNo}</td>
      <td>{certificate.sponser}</td>
      <td>{certificate.protoColNo}</td>
      <td>{certificate.startDate}</td>
      <td>{certificate.endDate}</td>
      <td>{certificate.noOfSubjects}</td>
      <td>{certificate.country}</td>
      <td>{certificate.requestStatus}</td>
      <td>
        <div className="btn-group mr-2">
          <Link
            to={`/certificates/${certificate.certificateNo}/edit`}
            className="btn btn-sm btn-outline-secondary">
            <i className="bi bi-pencil"></i>
          </Link>
          {/* 把当前遍历的动态索引传给copy方法 */}
          <button
            className="btn btn-sm btn-outline-secondary"
            onClick={() => copy(index)}
          >
            <i className="bi bi-plus-square"></i>
          </button>
          <a href="#" className="btn btn-sm btn-outline-secondary">
            -
          </a>
          <a href="#" className="btn btn-sm btn-outline-secondary">
            <i className="bi bi-x-circle"></i>
          </a>
          <a href="#" className="btn btn-sm btn-outline-secondary">
            <i className="bi bi-search"></i>
          </a>
        </div>
      </td>
    </tr>
  );
})}

如果你的业务要求复制后的行certificateNo必须和原行完全一致，也可以直接把key改为index即可满足需求。

内容的提问来源于stack exchange，提问作者Shruti sharma