如何使用单个State实现多个按钮的独立状态更新

你当前的问题是用单个布尔值state控制所有FAQ的显示/隐藏，导致点击任意按钮时所有内容都会同步切换。要实现单个按钮仅控制对应内容的展开收起，只需把state从布尔值改成存储当前展开项的唯一标识（比如问题ID、索引）即可，具体实现如下：

修改思路 #

1. 将原布尔值state替换为存储当前展开项标识的变量（初始值设为null表示全部收起）
2. 点击按钮时，切换当前项的标识：如果当前项已展开，就将state设为null（收起）；否则设为当前项的标识（展开）
3. 判断内容是否显示时，对比state值与当前项的标识是否一致

完整代码示例 #

import { useState } from 'react';

function Faqs() {
  // 用activeKey存储当前展开项的唯一标识，初始为null表示全部收起
  const [activeKey, setActiveKey] = useState(null);

  // 点击按钮切换对应FAQ的展开状态
  const toggleFaq = (key) => {
    setActiveKey(activeKey === key ? null : key);
  };

  return (
    <div>
      <h2>FAQS</h2>

      {/* 第一个FAQ项 */}
      <div>
        <h4>What is frontend mentor and how will help you?</h4>
        <button onClick={() => toggleFaq('faq1')}>
          {activeKey === 'faq1' ? 'menos' : 'más'}
        </button>
        {activeKey === 'faq1' && (
          <p>
            Frontend Mentor is an online platform that provides web development challenges and projects for frontend developers of all levels to practice their skills. It offers a variety of mockups and designs for websites, allowing users to code and implement these designs using HTML, CSS, and JavaScript.
          </p>
        )}
      </div>

      {/* 第二个FAQ项 */}
      <div>
        <h4>Is frontend mentor free?</h4>
        <button onClick={() => toggleFaq('faq2')}>
          {activeKey === 'faq2' ? 'menos' : 'más'}
        </button>
        {activeKey === 'faq2' && <p>yes</p>}
      </div>
    </div>
  );
}

export default Faqs;

关键说明 #

• 这里用'faq1'、'faq2'作为每个FAQ项的唯一标识，你也可以用数字索引（比如0、1）替代
• toggleFaq函数接收当前项的标识，通过判断activeKey的值来切换展开/收起状态
• 每个FAQ项的显示逻辑仅与自身标识和activeKey的对比结果绑定，互不干扰

如果需要支持同时展开多个FAQ，也可以用单个state存储数组来管理所有展开项：

// 用数组存储所有展开项的标识
const [activeKeys, setActiveKeys] = useState([]);

const toggleFaq = (key) => {
  setActiveKeys(prev => 
    prev.includes(key) 
      ? prev.filter(k => k !== key) 
      : [...prev, key]
  );
};

// 判断显示时用activeKeys.includes('faq1')

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