React TypeScript中映射数据时如何单独控制单个按钮的启用/禁用状态

你当前的问题出在所有按钮共享了同一个全局状态status，所以点击任意按钮都会触发全局状态切换，导致所有按钮同步变化。要实现每个按钮独立控制，需要给每个按钮维护单独的状态，具体修改如下：

修正后的完整代码 #

import { useState } from 'react';
import Button from '@mui/material/Button'; // 假设使用Material-UI的Button

function createData(
  id: number,
  name: string,
  enableStatus: boolean,
) {
  // 补充原代码中缺失的属性（根据实际业务场景调整）
  return { id, name, owner: '', category: '', join: false, status: '', enableStatus };
}

const rows = [
  createData(1, 'quiz1', true),
  createData(2, 'quiz2', false),
  createData(3, 'quiz3', true),
  createData(4, 'quiz4', false),
  createData(5, 'quiz5', true),
];

function Surveys() {
  // 用对象存储每个按钮的状态，key为按钮id，value为启用/禁用状态
  const [buttonStatus, setButtonStatus] = useState(() => 
    rows.reduce((acc, row) => ({ ...acc, [row.id]: row.enableStatus }), {})
  );

  // 点击事件接收按钮id，只更新对应按钮的状态
  const handleButton = (id: number) => {
    setButtonStatus(prevStatus => ({
      ...prevStatus,
      [id]: !prevStatus[id]
    }));
  };

  return (
    <div>
      {rows.map((row) => (
        <Button
          key={row.id} // 必须添加key属性满足React列表渲染要求
          variant="contained"
          color={buttonStatus[row.id] ? 'warning' : 'error'}
          onClick={() => handleButton(row.id)}
          size="small"
          style={{ margin: '0 8px 8px 0' }} // 可选：添加间距方便区分按钮
        >
          {buttonStatus[row.id] ? "Enabled" : 'Disabled'}
        </Button>
      ))}
    </div>
  );
}

export default Surveys;

关键修改点 #

• 状态存储方式：把单个布尔值status改成对象buttonStatus，每个按钮的id对应自己的启用状态，初始值从rows的enableStatus中读取。
• 点击事件逻辑：点击函数接收当前按钮的id，只更新该id对应的状态，不影响其他按钮。
• 按钮渲染逻辑：每个按钮的颜色和文本，根据自身id对应的buttonStatus值来判断，不再依赖全局状态。
• 修复代码缺陷：补充createData返回值中缺失的属性，添加key属性满足React列表渲染规范。

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