React实现数组元素点击切换显示/隐藏状态的问题

你当前直接把JSX元素存入数组的写法，很难单独为每个元素绑定独立状态。正确的思路是把数据与UI组件分离，通过状态管理每个问答项的显隐状态。

步骤1：重构数据结构 #

先将问答内容整理成纯数据数组，每个项包含唯一标识（id）、问题和答案：

const questionsData = [
  { id: 1, question: "Question 1", answer: "Answer 1" },
  { id: 2, question: "Question 2", answer: "Answer 2" },
  { id: 3, question: "Question 3", answer: "Answer 3" }
];

步骤2：用状态管理显隐状态 #

使用useState维护一个对象，记录每个问答项的显隐状态，初始全部设为false（默认隐藏答案）：

import { useState } from 'react';

function QuestionList() {
  // 初始化状态：每个id对应false，默认隐藏答案
  const [visibleStates, setVisibleStates] = useState(
    questionsData.reduce((acc, item) => {
      acc[item.id] = false;
      return acc;
    }, {})
  );

步骤3：编写切换函数 #

实现一个切换函数，根据点击项的id，单独翻转对应项的显隐状态：

const toggleVisibility = (id) => {
    setVisibleStates(prevStates => ({
      ...prevStates,
      [id]: !prevStates[id] // 仅修改当前点击项的状态
    }));
  };

步骤4：渲染组件 #

遍历数据数组生成UI，点击问题区域触发切换，根据状态控制答案的显示/隐藏：

return (
    <div>
      {questionsData.map(item => (
        <div 
          key={item.id} 
          className="question_section"
          onClick={() => toggleVisibility(item.id)}
          style={{ cursor: 'pointer', margin: '10px 0', padding: '10px', border: '1px solid #eee' }}
        >
          {item.question}
          <div 
            className="answer_section"
            style={{ 
              display: visibleStates[item.id] ? 'block' : 'none',
              marginTop: '8px',
              paddingLeft: '10px',
              color: '#666'
            }}
          >
            <p>{item.answer}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

export default QuestionList;

核心要点 #

• 用唯一id绑定状态，确保点击时精准定位目标项
• 状态更新采用函数式写法（prevStates），避免状态依赖错误
• 数据与UI分离后，新增/修改问答项只需更新questionsData，无需改动组件逻辑

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