React useState实现FAQ折叠面板遇双击触发问题求助

问题根源是你同时混用了HTML <details> 标签的原生展开逻辑和React的useState状态控制，两者的状态会出现不同步：首次点击时，原生<details>的open状态已经改变，但React维护的state没同步更新，导致后续点击需要先让React state追上原生状态，才会触发预期的切换，表现为需要双击。

修复方案分两种情况： #

情况1：不需要全局控制（比如批量展开/收起），完全复用原生details逻辑

这种情况下不需要额外维护state，直接利用<details>和<summary>的原生行为即可，代码更简洁：

function FAQItem({ question, answer }) {
  return (
    <details>
      <summary>{question}</summary>
      <p>{answer}</p>
    </details>
  );
}

// 使用示例
function FAQ() {
  const faqs = [
    { question: "问题1", answer: "答案1" },
    { question: "问题2", answer: "答案2" }
  ];
  
  return (
    <div className="faq-container">
      {faqs.map((faq, idx) => (
        <FAQItem key={idx} question={faq.question} answer={faq.answer} />
      ))}
    </div>
  );
}

情况2：需要全局控制（比如添加"展开全部"/"收起全部"按钮），完全用React state接管状态

这种情况下要禁止原生<details>的自主状态切换，通过open属性绑定state，同时手动处理点击事件更新state：

import { useState } from 'react';

function FAQ() {
  const faqs = [
    { id: 1, question: "问题1", answer: "答案1", isOpen: false },
    { id: 2, question: "问题2", answer: "答案2", isOpen: false }
  ];
  const [faqList, setFaqList] = useState(faqs);

  // 切换单个FAQ的展开状态
  const toggleFaq = (id) => {
    setFaqList(prev => 
      prev.map(faq => 
        faq.id === id ? { ...faq, isOpen: !faq.isOpen } : faq
      )
    );
  };

  // 展开全部
  const openAll = () => {
    setFaqList(prev => prev.map(faq => ({ ...faq, isOpen: true })));
  };

  // 收起全部
  const closeAll = () => {
    setFaqList(prev => prev.map(faq => ({ ...faq, isOpen: false })));
  };

  return (
    <div className="faq-container">
      <div className="controls">
        <button onClick={openAll}>展开全部</button>
        <button onClick={closeAll}>收起全部</button>
      </div>
      {faqList.map(faq => (
        <details 
          key={faq.id} 
          open={faq.isOpen}
          onClick={(e) => {
            // 阻止原生details的默认行为，避免状态冲突
            e.preventDefault();
            toggleFaq(faq.id);
          }}
        >
          <summary>{faq.question}</summary>
          <p>{faq.answer}</p>
        </details>
      ))}
    </div>
  );
}

关键注意点：

• 如果用state控制open属性，必须阻止<details>的默认点击事件，否则原生逻辑会和React state互相干扰
• 单个FAQ的状态要绑定到React state中，确保状态唯一来源是React，而不是原生DOM

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