React遍历问答对时点击单个问题却全部显示/隐藏，求排查原因

首先，你遇到的核心问题是所有问答对共享了同一个show状态，所以当你切换这个状态时，所有答案都会跟着同步变化。因为你的组件里只维护了一个全局的show状态，没有为每个单独的FAQ条目单独管理显示/隐藏状态。

具体解决思路 #

1. 为每个FAQ条目维护独立状态 #

你需要把单一的show状态改成一个对象或者数组，用来记录每个条目的展开状态。比如：

constructor() {
  super();
  // 初始化每个条目为隐藏状态，用索引或唯一id作为键
  this.state = {
    expandedItems: {}
  };
}

2. 修改点击事件处理逻辑 #

点击某个问题时，只切换该条目的状态，而不是全局的show：

toggleAnswer = (itemKey) => {
  this.setState(prevState => ({
    expandedItems: {
      ...prevState.expandedItems,
      [itemKey]: !prevState.expandedItems[itemKey]
    }
  }));
};

3. 渲染时根据对应条目状态控制显示 #

遍历messages时，每个条目根据自己的索引（或唯一id）去expandedItems里查找状态，决定是show还是hide：

render() {
  return (
    <div className="faq-container">
      {messages.map((message, index) => {
        const isExpanded = this.state.expandedItems[index] || false;
        return (
          <div key={index} className="faq-item">
            <button 
              className="faq-question"
              onClick={() => this.toggleAnswer(index)}
            >
              {message.question}
            </button>
            <div 
              className={`faq-answer ${isExpanded ? 'show' : 'hide'}`}
            >
              {message.answer}
            </div>
          </div>
        );
      })}
    </div>
  );
}

为什么原来的写法不行？ #

原来的代码里，你用一个单一的show状态控制所有答案的显示/隐藏，不管点击哪个问题，都会改变这个全局状态，导致所有答案同步切换。而给每个条目单独维护状态后，每个问答对的展开/收起都是独立的，不会互相影响。

额外优化建议 #

• 如果你的messages里每个条目有唯一的id字段，最好用id代替索引作为expandedItems的键，这样当列表顺序变化时不会出错。
• 可以把单个FAQ条目抽成独立的子组件，每个子组件自己维护show状态，这样父组件的状态管理会更简洁：

class FaqItem extends Component {
  constructor() {
    super();
    this.state = { isExpanded: false };
  }

  toggle = () => {
    this.setState(prev => ({ isExpanded: !prev.isExpanded }));
  };

  render() {
    const { question, answer } = this.props;
    return (
      <div className="faq-item">
        <button onClick={this.toggle}>{question}</button>
        <div className={`faq-answer ${this.state.isExpanded ? 'show' : 'hide'}`}>
          {answer}
        </div>
      </div>
    );
  }
}

// 父组件调用方式
class Faq extends Component {
  render() {
    return (
      <div className="faq-container">
        {messages.map(msg => <FaqItem key={msg.id} {...msg} />)}
      </div>
    );
  }
}

这种方式把状态下沉到子组件，每个FaqItem自己管理展开状态，代码更模块化，也更容易维护。

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