如何为map动态创建的Switch组件单独设置state？

问题现状 #

通过map循环生成的所有Switch组件共用同一个enabled状态，导致点击任意一个开关时，所有开关同步切换。需要实现：

• 无需为每个Switch硬编码单独状态（存在450多处使用场景）
• 触发onChange时可调用自定义业务逻辑

解决方案 #

方法一：用对象集中管理所有开关状态 #

利用对象存储每个开关的状态，以数据项的唯一标识（如person.id）作为key，避免状态冲突：

import { useState } from 'react';
import classNames from 'classnames';

// 初始化状态对象，默认所有开关为关闭状态
const [enabledStates, setEnabledStates] = useState({});

// 统一处理开关变更的函数，同时嵌入自定义逻辑
const handleSwitchToggle = (personId, isChecked) => {
  // 更新对应项的状态
  setEnabledStates(prevStates => ({
    ...prevStates,
    [personId]: isChecked
  }));
  
  // 这里替换为你的自定义业务逻辑
  console.log(`ID为${personId}的项，开关状态变为${isChecked ? '开启' : '关闭'}`);
};

return (
  <div>
    {people.map((person) => (
      <div key={person.id}>
        {/* 渲染单个Switch */}
        <Switch
          checked={enabledStates[person.id] || false}
          onChange={(e) => handleSwitchToggle(person.id, e.target.checked)}
          className={classNames(
            enabledStates[person.id] ? 'bg-indigo-600' : 'bg-gray-200',
            'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500'
          )}
        />
        {/* 其他人员信息 */}
        <span>{person.name}</span>
      </div>
    ))}
  </div>
);

方法二：封装独立的Switch组件（推荐高复用场景） #

将开关的状态管理封装到独立组件内部，通过props接收自定义回调，实现复用性最大化：

import { useState } from 'react';
import classNames from 'classnames';

// 封装带独立状态的Switch组件
const SelfContainedSwitch = ({ initialChecked = false, onToggle, className }) => {
  const [enabled, setEnabled] = useState(initialChecked);

  const handleChange = (e) => {
    const isChecked = e.target.checked;
    setEnabled(isChecked);
    // 触发父组件传入的自定义回调
    if (onToggle) onToggle(isChecked);
  };

  return (
    <Switch
      checked={enabled}
      onChange={handleChange}
      className={classNames(
        enabled ? 'bg-indigo-600' : 'bg-gray-200',
        'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500',
        className
      )}
    />
  );
};

// 父组件中使用
const ParentComponent = () => {
  return (
    <div>
      {people.map((person) => (
        <div key={person.id}>
          <SelfContainedSwitch
            initialChecked={false} // 可根据业务设置初始状态
            onToggle={(isChecked) => {
              // 自定义业务逻辑，关联当前person的信息
              console.log(`人员${person.name}的开关状态：${isChecked ? '开启' : '关闭'}`);
            }}
          />
          <span>{person.name}</span>
        </div>
      ))}
    </div>
  );
};

方案选择建议 #

• 若需要在父组件统一管理所有开关状态（如批量操作、状态回显），优先选择方法一
• 若开关状态相对独立，且需要在多个场景复用，优先选择方法二，代码模块化程度更高

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