点击删除按钮后如何重新渲染react-table并移除对应行？

要实现删除用户后无需刷新页面更新表格，核心是在删除API请求成功后，更新表格的数据源状态，让React-Table自动重新渲染。以下是两种最直接的实现方式：

方式一：通过回调函数传递更新逻辑（推荐，适合当前层级结构） #

这种方式不需要额外的Context，直接通过组件props传递删除成功后的回调，逻辑清晰且易维护。

1. 修改表格组件（持有用户数据状态） #

首先确保你的表格组件持有用户数据的state，并定义删除成功后的处理函数：

import React, { useState, useEffect } from 'react';
import { useTable } from 'react-table';
import UserDeleteButton from './UserDeleteButton';

function UserTable() {
  // 存储用户列表的状态
  const [users, setUsers] = useState([]);

  // 初始化获取用户数据（示例）
  useEffect(() => {
    fetchUsers();
  }, []);

  const fetchUsers = async () => {
    // 这里替换成你的获取用户列表API逻辑
    const res = await fetch('http://localhost:2000/api/users', {
      headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
    });
    const data = await res.json();
    setUsers(data);
  };

  // 删除成功后更新用户列表
  const handleUserDeleted = (deletedUserId) => {
    setUsers(prevUsers => prevUsers.filter(user => user.userid !== deletedUserId));
  };

  // 定义表格列（修改Manage User列的Cell逻辑）
  const columns = [
    // 其他列...
    {
      Header: 'Manage User',
      accessor: 'userid',
      Cell: ({ row }) => (
        <div>
          {/* 传递userId和删除成功回调 */}
          <UserDeleteButton 
            userId={row.original.userid} 
            onDeleteSuccess={() => handleUserDeleted(row.original.userid)}
          />
        </div>
      )
    }
  ];

  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({ columns, data: users });

  // 渲染表格（省略基础渲染代码）
  return (
    <table {...getTableProps()}>
      {/* 表格头部和主体渲染 */}
    </table>
  );
}

export default UserTable;

2. 修改UserDeleteButton组件（接收回调并触发） #

更新删除按钮组件，在API请求成功后调用传入的回调：

import React from 'react'
import axios from 'axios';

function UserDeleteButton({ userId, onDeleteSuccess }) {

  const handleDelete = () => {
    const jwt = localStorage.getItem('token');
    axios
      .delete(`http://localhost:2000/api/user/${userId}`, {
        headers: { Authorization: `Bearer ${jwt}` }
      })
      .then(() => {
        console.log('User deleted');
        // 调用回调通知表格更新数据
        if (onDeleteSuccess) onDeleteSuccess();
      })
      .catch((err) => {
        console.log(err);
      });
  }

  return (
    <button onClick={handleDelete}>
      delete
    </button>
  )
}

export default UserDeleteButton

方式二：使用React Context（适合复杂组件层级） #

如果你的组件层级更深，或者多个组件需要共享用户数据更新逻辑，可以使用Context方案：

1. 创建UserContext #

// UserContext.js
import { createContext, useContext } from 'react';

const UserContext = createContext();

export const UserProvider = ({ children, users, setUsers }) => {
  // 定义删除用户的逻辑
  const deleteUser = (userId) => {
    setUsers(prevUsers => prevUsers.filter(user => user.userid !== userId));
  };

  return (
    <UserContext.Provider value={{ deleteUser }}>
      {children}
    </UserContext.Provider>
  );
};

// 自定义Hook简化Context调用
export const useUserContext = () => useContext(UserContext);

2. 在表格组件中包裹Provider #

// UserTable.js
import { UserProvider } from './UserContext';

function UserTable() {
  const [users, setUsers] = useState([]);

  // ...其他逻辑（获取用户数据等）

  return (
    <UserProvider users={users} setUsers={setUsers}>
      {/* 表格渲染代码 */}
    </UserProvider>
  );
}

3. 在UserDeleteButton中使用Context #

// UserDeleteButton.js
import { useUserContext } from './UserContext';

function UserDeleteButton({ userId }) {
  const { deleteUser } = useUserContext();

  const handleDelete = () => {
    const jwt = localStorage.getItem('token');
    axios
      .delete(`http://localhost:2000/api/user/${userId}`, {
        headers: { Authorization: `Bearer ${jwt}` }
      })
      .then(() => {
        console.log('User deleted');
        // 调用Context中的删除逻辑
        deleteUser(userId);
      })
      .catch((err) => {
        console.log(err);
      });
  }

  return (
    <button onClick={handleDelete}>delete</button>
  )
}

关键注意点 #

• 原代码中Cell: (value) => {...}的参数错误：React-Table的Cell接收的是一个对象，包含row等属性，正确获取用户ID应该用row.original.userid，而非直接使用value。
• 无论哪种方式，核心都是更新表格绑定的数据源state，React-Table会自动根据新数据重新渲染。

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