React删除记录并将用户重定向到状态已更新的仪表板页面

import React, { useState } from 'react';
import { useHistory } from 'react-router-dom';

function RecordList({ records }) {
  const [recordsList, setRecordsList] = useState(records);
  const history = useHistory();

  const handleDelete = async (id) => {
    try {
      // 假设deleteRecord是一个API调用函数
      await deleteRecord(id);
      // 更新本地状态
      setRecordsList(recordsList.filter(record => record.id !== id));
      // 重定向到仪表板页面
      history.push('/dashboard');
    } catch (error) {
      console.error('Error deleting record:', error);
      // 可以在这里添加错误处理逻辑，如显示错误消息
    }
  };

  return (
    <div>
      {recordsList.map(record => (
        <div key={record.id}>
          {record.name}
          <button onClick={() => handleDelete(record.id)}>Delete</button>
        </div>
      ))}
    </div>
  );
}

export default RecordList;