React中如何为列表元素单独保存布尔状态并控制局部显示

你的核心问题是没有正确维护每个列表项的独立状态，原代码存在状态更新逻辑错误、参数传递错误等问题，以下是两种可靠的解决方案：

方案一：用对象存储每个Ticket的状态（推荐） #

利用Ticket的唯一ID作为键，存储对应项的展开状态，这种方式不受列表增删影响，稳定性更高：

function App () {    
  // 初始化空对象，键为ticket.id，值为布尔值控制显示
  const [expandedTickets, setExpandedTickets] = useState({});

  const toggleExpand = (ticketId) => {
    // 函数式更新，确保基于最新状态修改
    setExpandedTickets(prevState => ({
      ...prevState,
      [ticketId]: !prevState[ticketId]
    }));
  }

  return (
    <div>
      {tickets.map((ticket) => (
        <li key={ticket.id}>
          {/* 保留你原有其他DOM结构 */}
          <div>
            <button 
              className="btn btn-primary buttonSubCSS" 
              onClick={() => toggleExpand(ticket.id)} 
              variant="primary"
            >
              Chg
            </button>
            {/* 根据当前ticket的id判断是否显示内容 */}
            {expandedTickets[ticket.id] && <p>hi</p>}
          </div>
        </li>
      ))}
    </div>
  )
}

方案二：用数组存储状态（适合静态列表） #

如果你的tickets数组不会动态增删，可以用数组索引对应列表项，初始化数组长度与列表一致：

function App () {    
  // 初始化数组，所有项默认false
  const [expandedState, setExpandedState] = useState(Array(tickets.length).fill(false));

  const toggleExpand = (index) => {
    setExpandedState(prevState => {
      // 复制原数组，避免直接修改状态
      const newState = [...prevState];
      newState[index] = !newState[index];
      return newState;
    });
  }

  return (
    <div>
      {tickets.map((ticket, index) => (
        <li key={ticket.id}>
          {/* 保留你原有其他DOM结构 */}
          <div>
            <button 
              className="btn btn-primary buttonSubCSS" 
              onClick={() => toggleExpand(index)} 
              variant="primary"
            >
              Chg
            </button>
            {expandedState[index] && <p>hi</p>}
          </div>
        </li>
      ))}
    </div>
  )
}

原代码的核心问题说明 #

1. 状态更新逻辑错误：原代码中setChgState(!chgState.trueOrFalseState[i])直接将状态从对象改为布尔值，破坏了原有状态结构，导致后续无法访问trueOrFalseState数组。
2. 参数传递错误：onClick中传递的是数组内的布尔值而非索引/ID，导致chgStateToggle函数接收的参数无效。
3. 索引匹配混乱：getStateIndex生成的索引无法保证与tickets的实际索引对应，容易出现状态错位。

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