React(TSX)执行删除方法后如何更新组件？无需页面重载

不用整页刷新，直接通过React的状态更新就能实现列表刷新，具体方案如下：

核心逻辑 #

React是数据驱动视图的框架，只要更新存储列表数据的状态，组件就会自动重新渲染列表，完全不需要调用window.location.reload()这种粗暴的整页刷新方式。

具体实现步骤 #

1. 确保列表数据存在组件状态中 #

先把你的列表数据存在组件的useState状态里，示例如下：

import { useState, useEffect } from 'react';
import Swal from 'sweetalert2';

// 假设你的DataItem类型定义
type DataItem = {
  Id: number;
  // 其他字段根据实际情况补充
};

const YourComponent = () => {
  // 存储列表数据的状态
  const [items, setItems] = useState<DataItem[]>([]);

  // 页面初始化时获取列表数据
  useEffect(() => {
    const fetchItems = async () => {
      const response = await Api.get('api/stuff');
      setItems(response.data);
    };
    fetchItems();
  }, []);

2. 修改删除函数，更新状态 #

把原来的DeleteCard改成组件内的异步函数，在删除接口调用成功后，直接过滤掉状态里被删除的条目：

const DeleteCard = async (item: DataItem) => {
    const result = await Swal.fire({
      title: 'Are you sure?',
      text: "You won't be able to revert this!",
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Yes, delete it!'
    });

    if (result.isConfirmed) {
      try {
        // 注意这里要用反引号包裹模板字符串，否则变量item.Id不会被解析
        await Api.delete(`api/stuff/${item.Id}`);
        Swal.fire('Deleted!', 'Your file has been deleted.', 'success');
        
        // 关键操作：更新列表状态，移除被删除的条目
        setItems(prevItems => prevItems.filter(i => i.Id !== item.Id));
      } catch (error) {
        // 处理删除失败的情况，给用户提示
        Swal.fire('Error!', 'Failed to delete the item.', 'error');
      }
    }
  };

3. 基于状态渲染列表 #

直接用items状态渲染你的列表即可，状态更新后列表会自动刷新：

return (
    <div>
      {items.map(item => (
        <div key={item.Id}>
          {/* 这里渲染你的卡片内容 */}
          <button onClick={() => DeleteCard(item)}>删除</button>
        </div>
      ))}
    </div>
  );
};

export default YourComponent;

重点提醒 #

• 用async/await替代嵌套then，代码更清晰也更容易处理异步逻辑
• 修正模板字符串语法：原来的单引号包裹无法解析变量，必须改成反引号`
• 增加错误处理：接口调用可能失败，捕获异常能避免状态错误更新，同时给用户明确提示
• 如果用了全局状态管理（比如Redux、Zustand），就在删除成功后dispatch对应的更新action，组件订阅状态变化后会自动刷新列表

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