如何为表中的一列启用状态(React Js)

const [data, setData] = useState([]);

// 在某个地方获取到表格数据，例如从API调用获取
const fetchData = () => {
  // 调用API获取数据
  // 假设获取到的数据是一个数组，每个元素表示表格中的一行数据
  const response = await fetch('API_URL');
  const data = await response.json();

  // 将数据绑定到data状态变量
  setData(data);
};

// 在组件加载时调用fetchData函数来获取表格数据
useEffect(() => {
  fetchData();
}, []);

const handleEnableStatus = (rowId) => {
  // 使用map函数遍历数据源的每一行
  const updatedData = data.map((row) => {
    // 根据行的ID找到需要更新的行
    if (row.id === rowId) {
      // 更新行中的启用状态
      return { ...row, enabled: true };
    }
    return row;
  });

  // 更新数据源
  setData(updatedData);
};

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Enabled</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    {data.map((row) => (
      <tr key={row.id}>
        <td>{row.id}</td>
        <td>{row.name}</td>
        <td>{row.enabled ? 'Enabled' : 'Disabled'}</td>
        <td>
          <button onClick={() => handleEnableStatus(row.id)}>
            Enable
          </button>
        </td>
      </tr>
    ))}
  </tbody>
</table>