React中FAQ列表点击问题仅展开对应答案的实现问题

嗨，这个问题我太熟了！你现在的问题根源在于整个Faqs组件只共用了一个isHidden状态，所有FAQ条目都盯着这个状态看——不管你点哪个问题，状态一更新，所有答案自然就一起显示/隐藏了。给你两种靠谱的解决办法：

把每个FAQ条目做成独立的子组件，让每个条目自己管理自己的显示隐藏状态，互不干扰。

首先写一个单独的FaqItem组件：

class FaqItem extends Component {
  constructor(props) {
    super(props);
    this.state = { isHidden: true };
    // 绑定this上下文，避免点击时this指向错误
    this.toggleHidden = this.toggleHidden.bind(this);
  }

  toggleHidden() {
    // 用prevState确保拿到最新的状态值（因为React状态更新是异步的）
    this.setState(prevState => ({
      isHidden: !prevState.isHidden
    }));
  }

  render() {
    const { question, answer } = this.props;
    return (
      <div className="faq-item">
        <button onClick={this.toggleHidden} className="faq-question">
          {question}
        </button>
        {/* 根据当前条目的isHidden状态决定是否显示答案 */}
        {!this.state.isHidden && (
          <div className="faq-answer">
            {answer}
          </div>
        )}
      </div>
    );
  }
}

然后在原来的Faqs组件里循环渲染这个子组件：

class Faqs extends Component {
  render() {
    // 假设你的FAQ数据是通过props传进来的数组，每个元素包含question和answer
    return (
      <div className="faqs-container">
        {this.props.faqs.map((faq, index) => (
          <FaqItem 
            key={index} 
            question={faq.question} 
            answer={faq.answer} 
          />
        ))}
      </div>
    );
  }
}

如果不想拆分子组件，可以在Faqs组件里用一个对象来记录每个条目的隐藏状态，通过索引或唯一ID来区分不同条目。

class Faqs extends Component {
  constructor(props) {
    super(props);
    // 初始化状态：给每个FAQ条目设置默认隐藏
    const initialHiddenStates = {};
    this.props.faqs.forEach((_, index) => {
      initialHiddenStates[index] = true;
    });
    this.state = { hiddenStates: initialHiddenStates };
    this.toggleHidden = this.toggleHidden.bind(this);
  }

  toggleHidden(index) {
    // 更新对应索引条目的隐藏状态
    this.setState(prevState => ({
      hiddenStates: {
        ...prevState.hiddenStates,
        [index]: !prevState.hiddenStates[index]
      }
    }));
  }

  render() {
    return (
      <div className="faqs-container">
        {this.props.faqs.map((faq, index) => (
          <div key={index} className="faq-item">
            <button 
              onClick={() => this.toggleHidden(index)} 
              className="faq-question"
            >
              {faq.question}
            </button>
            {/* 根据当前索引对应的hiddenStates值决定是否显示答案 */}
            {!this.state.hiddenStates[index] && (
              <div className="faq-answer">
                {faq.answer}
              </div>
            )}
          </div>
        ))}
      </div>
    );
  }
}

两种方案都能解决你的问题，第一种更符合React组件化的设计思想，后期维护和扩展也更方便；第二种适合不想新增组件的场景，用索引就能快速区分每个条目。

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