React中如何创建并更新动态状态？实现列表项展开功能

你之前给每个项单独创建状态的方式太冗余，还容易出问题，换用单个状态记录当前展开项的ID就能轻松解决：

核心思路 #

不用给每个列表项单独维护展开状态，而是用一个状态变量存储当前处于展开状态的项的唯一标识（比如数据里的id），渲染时通过对比项ID来决定是否显示展开区域。

代码示例 #

import { useState } from 'react';

function ItemList() {
  // 用状态存当前展开项的ID，初始为null表示没有项展开
  const [expandedId, setExpandedId] = useState(null);
  // 假设这是从API获取的数据列表
  const apiData = [
    { id: 1, name: "项目A", desc: "这是项目A的描述" },
    { id: 2, name: "项目B", desc: "这是项目B的描述" },
    { id: 3, name: "项目C", desc: "这是项目C的描述" }
  ];

  // 切换展开/收起的逻辑
  const handleToggle = (itemId) => {
    // 如果当前项已经展开，就收起；否则展开该项
    setExpandedId(prevId => prevId === itemId ? null : itemId);
  };

  return (
    <div className="list-container">
      {apiData.map(item => (
        <div key={item.id} className="item-card">
          {/* 基础信息区域 */}
          <div className="item-info">
            <h4>{item.name}</h4>
            <p>{item.desc}</p>
            <button onClick={() => handleToggle(item.id)}>
              {expandedId === item.id ? "收起" : "展开"}
            </button>
          </div>
          {/* 展开后的区域，只有当当前项ID匹配时才显示 */}
          {expandedId === item.id && (
            <div className="expand-area">
              <textarea placeholder="输入你的内容..." rows="3" />
              <button className="submit-btn">提交</button>
            </div>
          )}
        </div>
      ))}
    </div>
  );
}

关键说明 #

1. 状态精简：只用一个状态变量管理所有项的展开状态，避免冗余，也更容易维护。
2. 切换逻辑：点击按钮时，通过函数式更新状态，判断当前项是否已经展开，动态切换状态值。
3. 渲染控制：利用条件渲染，只有当项ID和状态里的expandedId匹配时，才渲染展开的textarea和提交按钮。
4. key的使用：必须用列表项的唯一id作为key，保证React能正确识别每个列表项，避免渲染异常。

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