React 实现点击单条问题展示对应答案、避免全量答案显示

当前交互逻辑的核心缺陷，是把openQuestion设计成了全局通用的布尔开关：

• 通过map循环生成的所有问题块，共用同一个openQuestion的布尔判断条件
• 只要状态从false切换为true，所有渲染节点的条件判断都会同时成立，最终造成全部答案一起展示的问题
• 现有状态完全没有记录「具体哪个问题被点击了」的精准标识，从设计上就无法实现单问题的匹配控制

核心思路是调整状态存储的内容：不再存布尔值，改为存储当前被展开问题的唯一标识，默认初始值为null代表所有答案均为收起状态。

步骤1：调整状态初始化逻辑 #

替换原有布尔值状态，存储当前展开项的唯一标识（优先用数组索引/问题自带的id，不建议用问题文本做匹配）：

// 初始为null表示无任何展开的问题
const [openQuestionKey, setOpenQuestionKey] = useState(null)

额外说明：不建议用问题文本作为匹配标识，如果后续出现两个完全相同的问题文案，会引发匹配混乱，优先用数组索引、或者问题对象自带的唯一id做匹配，稳定性更高

步骤2：重写点击处理函数 #

实现「点击展开当前项、再次点击收起、点击其他项切换展开目标」的交互：

const handleOpen = (currentItemKey) => {
  // 对比当前点击的标识和已存储的展开标识：相同就收起，不同就切换为新的展开项
  setOpenQuestionKey(prevKey => prevKey === currentItemKey ? null : currentItemKey)
}

原有代码里通过find遍历数组定位点击项的逻辑可以完全移除，因为我们在渲染列表时已经能直接拿到当前项的唯一标识，不需要额外重复遍历，减少冗余计算。

步骤3：调整JSX渲染逻辑 #

• 给点击事件传入当前问题的唯一标识
• 修改答案展示的判断条件，精准匹配当前遍历项是否为已展开目标

<div className="questions">
  {md.questionsArray.map((item, i) => (
    <div
      key={i}
      className="question"
      onClick={() => handleOpen(i)} // 传入当前问题的数组索引作为唯一标识
    >
      <p>{item.question}</p>
      {/* 仅当当前遍历项的索引和存储的展开标识一致时，才渲染答案 */}
      {openQuestionKey === i ? <p>{item.answer}</p> : null}
    </div>
  ))}
</div>

调整后完全匹配预期交互：

• 初始状态下所有答案均隐藏
• 点击某一个问题，仅对应问题的答案展开，其余问题答案保持隐藏
• 点击已展开的问题，答案自动收起
• 点击其他未展开的问题，会自动收起上一个展开的问题，同时展开当前点击项

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