React Table内如何单独控制每行切换开关状态避免全局联动变化

架构老林

2026-10-8

开关状态参考

未激活状态：
激活状态：

问题原因

所有行的切换开关共用同一个全局status状态变量，任意开关触发状态更新都会修改同一个值，导致所有开关同步变更状态。

解决方案

使用对象类型的状态存储每行开关的独立状态，以行的唯一标识（如用户ID、用户名等无重复字段）作为对象key，对应值为该行开关的布尔状态，修改后代码如下：

状态定义与切换函数

// 以行数据的id作为状态key，无id可替换为username等唯一字段
const [rowStatus, setRowStatus] = useState({});

const toggler = (rowId, originalStatus) => {
  setRowStatus(prev => ({
    ...prev,
    // 首次切换时默认取行原始Status值做反转
    [rowId]: !(prev[rowId] ?? originalStatus)
  }));
};

列配置修改

const COLUMNS = useMemo (() => [
  {
    Header: "Username",
    accessor: "Username",
    textAlign: "left",
    sortable: false,
  },
  {
    Header: "Status",
    accessor: "Status",
    textAlign: "center",
    Cell: ({ value, cell: { row } }) => {
      const currentStatus = rowStatus[row.original.id] ?? value;
      return (
        <div>
          <FormControlLabel
            control={
              <IOSSwitch
                checked={currentStatus}
                onClick={() => toggler(row.original.id, value)}
                name="status"
              />
            }
          />
          {currentStatus ? <span>Active</span> : <span>Inactive</span>}
        </div>
      );
    },
  },
], [rowStatus]);