在React中如何为map遍历渲染的元素设置独立的state？

问题原因 #

所有按钮共享同一个布尔类型的enableS状态，所有按钮的渲染逻辑都绑定这一个变量，因此点击任意按钮修改状态后，所有按钮都会同步响应变更。

方案1：父组件统一管理状态集合 #

如果父组件需要获取所有按钮的启用状态做后续统一处理，可以把状态定义为和列表长度匹配的数组（如果列表元素有唯一ID也可以用对象存储，性能更好），修改时只更新对应位置的状态：

const list = [x, y, z];
// 初始化时生成和列表长度一致的状态数组，默认都为启用状态
const [enableStates, setEnableStates] = useState(() => list.map(() => true));

return (<>
  {list.map((item, index) => 
    <button 
      onClick={() => {
        setEnableStates(prev => {
          // 基于之前的状态生成新数组，仅修改对应索引的状态值
          const newStates = [...prev];
          newStates[index] = !newStates[index];
          return newStates;
        })
      }}
    >
      {enableStates[index] ? '禁用' : '启用'}
    </button>
  )}
</>);

如果列表元素有唯一标识id，可以用对象存储状态，避免数组索引变化导致的状态错乱：

const list = [{id: 1, value: x}, {id:2, value: y}, {id:3, value: z}];
const [enableStates, setEnableStates] = useState(() => {
  return list.reduce((acc, item) => {
    acc[item.id] = true;
    return acc;
  }, {})
});

return (<>
  {list.map(item => 
    <button 
      key={item.id}
      onClick={() => {
        setEnableStates(prev => ({
          ...prev,
          [item.id]: !prev[item.id]
        }))
      }}
    >
      {enableStates[item.id] ? '禁用' : '启用'}
    </button>
  )}
</>);

方案2：封装独立子组件维护自身状态 #

如果按钮的启用状态不需要传递给父组件、逻辑完全独立，可以把按钮封装成独立组件，每个组件内部自己维护state，不需要在父层做额外的状态管理：

// 独立按钮组件，自身维护启用状态
const ToggleButton = () => {
  const [enable, setEnable] = useState(true);
  return <button onClick={() => setEnable(!enable)}>
    {enable ? '禁用' : '启用'}
  </button>
}

// 父组件直接遍历渲染即可
const Parent = () => {
  const list = [x, y, z];
  return (<>
    {list.map((item, index) => <ToggleButton key={index} />)}
  </>)
}

方案选型建议 #

• 需要父组件统一操作/读取多个按钮状态的场景选方案1
• 按钮逻辑完全独立、不需要对外暴露状态的场景选方案2，代码更简洁耦合度更低

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