React中切换div内过滤列表项及多列表误切换问题排查

嘿，这个问题我太熟了！本质上是状态作用域的问题——你现在所有区块都共用了同一个状态变量（比如isActive），所以点击任何一个按钮，都会修改这个全局的状态值，导致所有依赖该状态的列表区块都一起切换展示状态。

具体问题分析 #

举个例子，假设你原来的代码大概是这样的：

function App() {
  // 所有区块共用这一个状态
  const [isActive, setIsActive] = useState(false);

  return (
    <div>
      {/* 第一个区块 */}
      <div>
        <button onClick={() => setIsActive(!isActive)}>切换列表</button>
        <ul>
          {isActive ? fullList1 : filteredList1}
        </ul>
      </div>
      {/* 第二个区块 */}
      <div>
        <button onClick={() => setIsActive(!isActive)}>切换列表</button>
        <ul>
          {isActive ? fullList2 : filteredList2}
        </ul>
      </div>
    </div>
  );
}

这里isActive是整个App组件的状态，不管点击哪个按钮，都会改变这个值，自然所有区块的列表都会同步变化。

两种可行的解决方案 #

方案1：将每个区块封装为独立子组件 #

这是最推荐的React组件设计模式——让每个区块拥有自己的独立状态，互不干扰：

// 封装独立的列表区块组件
function ListSection({ title, items, showCount = 2 }) {
  // 每个子组件拥有自己的isActive状态
  const [isActive, setIsActive] = useState(false);
  
  // 根据当前组件的状态过滤列表
  const displayItems = isActive ? items : items.slice(0, showCount);

  return (
    <div className="section">
      <button onClick={() => setIsActive(!isActive)}>
        {isActive ? '收起' : '展开'} {title}
      </button>
      <ul>
        {displayItems.map(item => (
          <li key={item.id}>{item.content}</li>
        ))}
      </ul>
    </div>
  );
}

// 父组件中使用子组件
function App() {
  // 不同区块的列表数据
  const section1Data = [{id:1, content:'项1'}, {id:2, content:'项2'}, {id:3, content:'项3'}];
  const section2Data = [{id:1, content:'A项1'}, {id:2, content:'A项2'}, {id:3, content:'A项3'}];

  return (
    <div className="app">
      <ListSection title="区块1" items={section1Data} />
      <ListSection title="区块2" items={section2Data} />
    </div>
  );
}

这样每个ListSection组件都有自己的isActive状态，点击自己的按钮只会修改自身的状态，完全不会影响其他区块。

方案2：在父组件中用对象/数组管理多区块状态 #

如果不想拆分组件，也可以在父组件中用一个对象来存储每个区块的激活状态，通过唯一标识区分：

function App() {
  // 用对象存储每个区块的激活状态，key是区块唯一ID
  const [activeSections, setActiveSections] = useState({
    section1: false,
    section2: false
  });

  // 切换指定区块的状态
  const toggleSection = (sectionId) => {
    setActiveSections(prevState => ({
      ...prevState,
      [sectionId]: !prevState[sectionId]
    }));
  };

  const section1Data = [{id:1, content:'项1'}, {id:2, content:'项2'}, {id:3, content:'项3'}];
  const section2Data = [{id:1, content:'A项1'}, {id:2, content:'A项2'}, {id:3, content:'A项3'}];

  return (
    <div className="app">
      <div className="section">
        <button onClick={() => toggleSection('section1')}>
          {activeSections.section1 ? '收起' : '展开'} 区块1
        </button>
        <ul>
          {(activeSections.section1 ? section1Data : section1Data.slice(0,2)).map(item => (
            <li key={item.id}>{item.content}</li>
          ))}
        </ul>
      </div>
      <div className="section">
        <button onClick={() => toggleSection('section2')}>
          {activeSections.section2 ? '收起' : '展开'} 区块2
        </button>
        <ul>
          {(activeSections.section2 ? section2Data : section2Data.slice(0,2)).map(item => (
            <li key={item.id}>{item.content}</li>
          ))}
        </ul>
      </div>
    </div>
  );
}

这里通过section1、section2这样的唯一ID来区分每个区块的状态，点击按钮时只修改对应ID的状态值，实现独立控制。

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