React JS点击任意accordion全部展开，如何实现每次仅展开一个手风琴

问题原因 #

所有手风琴项共用同一个布尔类型的isActive状态，状态变化会同步作用到所有项的展开判断逻辑，因此会出现点击一个所有同步展开的问题。要实现每次仅展开一项，需要将状态调整为存储当前激活项的唯一标识（推荐用遍历的下标，或者item数据的唯一id）。

调整步骤 #

1. 修改状态定义
   将原来的布尔状态修改为存储激活项下标的状态，初始值设为null表示默认没有展开项：

const [activeIndex, setActiveIndex] = useState(null);

2. 修改标题点击逻辑
   点击时判断当前点击项的下标是否为已激活下标：如果是则收起（重置为null），如果不是则切换为当前下标：

onClick={() => setActiveIndex(activeIndex === index ? null : index)}

3. 修改展开和符号的判断逻辑
   将原来的isActive判断替换为「当前项下标等于存储的激活下标」的判断：

• 符号判断：{activeIndex === index ? "-" : "+"}
• 内容展开判断：{activeIndex === index && (<div className="accordion-content">...</div>)}

完整修改后代码 #

const [activeIndex, setActiveIndex] = useState(null);

// 组件渲染部分
<div className="accordion">
  {Object.values(mapped).map((item, index) => (
    <div className="accordion-item">
      <div
        className="accordion-title"
        onClick={() => setActiveIndex(activeIndex === index ? null : index)}
      >
        <div>{item[0].date}</div> <div>11:45</div> 
        <div>painscale</div>
        <div>4</div>
        <div>{activeIndex === index ? "-" : "+"}</div>
      </div>
      {activeIndex === index && (
            <div className="accordion-content">
              <table>
                <thead>
                  <tr>
                    <th>sdcs</th>
                  </tr>
                </thead>
                {item.map((e) => {
                  return (
                    <tr>
                      <td> {e.time}</td> <td>{e.d}</td>{" "}
                      <td> {e.scale}</td> <td>{/* 注意原代码此处escale.为语法错误，请自行修正业务逻辑 */}</td>
                    </tr>
                  );
                })}
              </table>
            </div>
          )}
    </div>
  ))}
</div>

注：原代码中<td>{escale.}</td>存在语法错误，请根据你的实际业务逻辑修正该部分代码。

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