React循环渲染中如何动态管理单个元素的useState布尔状态

方案1：用动态对象存储元素状态 #

通过元素的**唯一标识（如id）**作为对象的key，动态维护每个元素的状态，无需硬编码对象结构，适配任意数量的列表项。

import { useState } from 'react';

const ItemList = () => {
  // 初始为空对象，动态添加各元素的状态
  const [itemStates, setItemStates] = useState({});
  const items = [
    { id: 1, content: '列表项1' },
    { id: 2, content: '列表项2' },
    { id: 3, content: '列表项3' }
  ];

  const toggleItem = (itemId) => {
    setItemStates(prevState => ({
      ...prevState,
      // 切换当前元素的状态，未定义时默认取反为true
      [itemId]: !prevState[itemId]
    }));
  };

  return (
    <div>
      {items.map(item => (
        <div 
          key={item.id} 
          onClick={() => toggleItem(item.id)}
          style={{ padding: '8px', border: '1px solid #eee', margin: '4px 0' }}
        >
          {item.content}
          {itemStates[item.id] && <p>展开的详情内容</p>}
        </div>
      ))}
    </div>
  );
};

export default ItemList;

优势：完全动态，新增/删除列表项无需修改状态逻辑，仅需保证每个元素有唯一id。

方案2：封装独立组件隔离状态 #

将每个可切换状态的元素封装成独立组件，让组件自身管理状态，父组件仅负责传递数据，实现逻辑解耦。

import { useState } from 'react';

// 独立列表项组件，自身维护状态
const ListItem = ({ content }) => {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <div 
      onClick={() => setIsExpanded(!isExpanded)}
      style={{ padding: '8px', border: '1px solid #eee', margin: '4px 0' }}
    >
      {content}
      {isExpanded && <p>展开的详情内容</p>}
    </div>
  );
};

const ItemList = () => {
  const items = [
    { id: 1, content: '列表项1' },
    { id: 2, content: '列表项2' },
    { id: 3, content: '列表项3' }
  ];

  return (
    <div>
      {items.map(item => (
        <ListItem key={item.id} content={item.content} />
      ))}
    </div>
  );
};

export default ItemList;

优势：组件职责单一，状态完全隔离，父组件逻辑简洁，适合复杂场景下的状态管理。

方案3：跟踪当前激活元素（单选场景） #

如果仅需要支持单选（同一时间只有一个元素处于激活状态），可以用单个状态存储当前激活元素的id，无需维护每个元素的独立状态。

import { useState } from 'react';

const ItemList = () => {
  // 存储当前激活的元素id，初始为null表示无激活项
  const [activeId, setActiveId] = useState(null);
  const items = [
    { id: 1, content: '列表项1' },
    { id: 2, content: '列表项2' },
    { id: 3, content: '列表项3' }
  ];

  const toggleActive = (itemId) => {
    // 点击已激活项则取消，否则设置为当前项
    setActiveId(prev => prev === itemId ? null : itemId);
  };

  return (
    <div>
      {items.map(item => (
        <div 
          key={item.id} 
          onClick={() => toggleActive(item.id)}
          style={{ 
            padding: '8px', 
            border: '1px solid #eee', 
            margin: '4px 0',
            backgroundColor: activeId === item.id ? '#f0f0f0' : 'white'
          }}
        >
          {item.content}
          {activeId === item.id && <p>展开的详情内容</p>}
        </div>
      ))}
    </div>
  );
};

export default ItemList;

优势：状态更轻量化，适合单选类交互场景，减少不必要的状态存储。

内容的提问来源于stack exchange，提问作者Martin Kamír