React Table删除行仅生效一次问题排查求助

问题现象 #

使用第三方包构建React表格，每行配置删除按钮移除行数据，出现以下异常：

• 仅首次删除操作有效
• 点击与之前删除行同索引的删除按钮，操作无反应
• 点击不同索引的删除按钮，当前行会被删除，但之前已删除的行会重新出现

核心问题原因 #

你的状态管理确实存在问题，和定时器无关，根本原因在于：

1. 依赖数组索引作为唯一标识：addCustomButtons里用map的idx给每行赋值index属性，删除行后重新渲染时，剩余行的索引会重新排序，导致新行的index和之前已删除行的index重复，findIndex匹配时出现混乱。
2. 状态更新时的逻辑错误：删除行后调用addCustomButtons(updatedRows)，但updatedRows已经是经过处理带index和JSX的对象，再次调用会重复包裹、重置索引，导致数据错乱。

修复方案 #

步骤1：使用数据本身的唯一标识替代数组索引 #

不要用map的idx作为行的唯一标识，改用每行数据自带的唯一值（比如用户ID、邮件地址等，假设原始rows里的emailraw是唯一的），确保每行的标识不会因为数组排序变化而改变。

步骤2：拆分原始数据与渲染数据 #

只维护原始数据的状态，渲染时再动态生成带按钮的行数据，避免重复处理导致的数据错乱。

步骤3：修正删除逻辑 #

删除时直接操作原始数据，而不是已经处理过的渲染数据，确保状态更新的准确性。

修改后的完整代码 #

import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { MDBDatatable, MDBBtn, MDBIcon } from 'mdb-react-ui-kit';
import Wrapper from '../Wrapper';
import styled from 'styled-components';
import { rows, cols } from '../../variables/Users';

const Table = ({ tableData }) => {
  return (
    <StyledTable
      hover
      striped
      data={tableData}
      advancedData
      entriesOptions={[5, 10, 20]}
      entries={10}
      fixedHeader
      maxHeight='460px'
    />
  )
}

export default function UsersTable() {
  // 仅维护原始数据状态，不存储处理后的渲染数据
  const [originalRows, setOriginalRows] = useState(rows);

  // 动态生成带按钮的表格数据，每次渲染时重新计算
  const getTableData = () => {
    return {
      columns: cols,
      rows: originalRows.map((row) => {
        return {
          ...row,
          email: (
            <StyledLink
              to='#'
              onClick={(e) => {
                window.location.href = `mailto:${row.emailraw}`;
                e.preventDefault();
              }}
            >
              {row.emailraw}
            </StyledLink>
          ),
          buttons: (
            <>
              <StyledButton
                size='sm'
                floating
                className='message-btn'
                onClick={() => console.log(`send a message to ${row.emailraw}`)}
              >
                <MDBIcon icon='envelope' />
              </StyledButton>
              <StyledButton outline size='sm' floating className='call-btn' onClick={() => console.log(`edit user settings`)}>
                <MDBIcon icon='arrow-right' />
              </StyledButton>
              <StyledButton
                size='sm'
                floating
                className='remove-user-btn'
                // 传递数据自身的唯一标识，而非数组索引
                onClick={() => deleteRow(row.emailraw)}
              >
                <MDBIcon icon="trash" />
              </StyledButton>
            </>
          ),
        };
      })
    }
  }

  const deleteRow = (uniqueEmail) => {
    // 基于唯一标识过滤掉要删除的行，更新原始数据状态
    const newRows = originalRows.filter(row => row.emailraw !== uniqueEmail);
    setOriginalRows(newRows);
  }

  return (
    <Wrapper>
      <TableContainer>
        <Table tableData={getTableData()} />
      </TableContainer>
    </Wrapper>
  );
}

关键修改点说明 #

• 状态拆分：originalRows存储原始未处理的数据，getTableData()在每次渲染时动态生成带按钮的表格数据，避免重复处理导致的错乱。
• 唯一标识替换索引：用row.emailraw作为行的唯一标识，删除时通过这个标识过滤，不再依赖数组索引。
• 简化删除逻辑：直接使用filter过滤原始数据，状态更新更简洁可靠，避免splice和findIndex带来的索引匹配问题。

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