在React中删除表格数据(td)值后设置状态

import React, { useState } from 'react';

function TableComponent() {
  const [tableData, setTableData] = useState([]);

  // 其他组件代码

  return (
    <table>
      {/* 表格内容 */}
    </table>
  );
}

function handleDeleteRow(rowIndex) {
  const updatedTableData = tableData.filter((_, index) => index !== rowIndex);
  setTableData(updatedTableData);
}

function TableComponent() {
  // 状态和其他代码

  return (
    <table>
      <tbody>
        {tableData.map((rowData, rowIndex) => (
          <tr key={rowIndex}>
            {/* 表格单元格内容 */}
            <td>{rowData}</td>
            <td>
              <button onClick={() => handleDeleteRow(rowIndex)}>删除</button>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}