React中筛选函数导致所有组件卸载的问题排查

嘿，我来帮你搞定这个单选按钮筛选的问题！你说选任何单选按钮都会清空DOM，这大概率是筛选逻辑出了问题，导致每次筛选后都拿到了空数组，自然就没东西渲染啦。咱们一步步来排查和解决：

1. 先检查状态管理是否正确 #

首先得确保你在组件里正确维护了筛选的状态——选中的单选按钮值应该存在组件的state里，比如用Semantic UI React的Radio组件的话，要正确获取选中值：

class FilterOptions extends Component {
  state = {
    selectedFilter: 'all', // 默认显示全部
    data: [], // 你的源数据，可能是从props传入或者自己初始化
  };

  // 处理单选按钮切换的函数
  handleFilterChange = (e, { value }) => {
    this.setState({ selectedFilter: value });
  };
}

这里要注意：Semantic UI的Radio组件触发onChange时，选中值是在第二个参数的value字段里，别搞错了获取方式哦。

2. 核心：确保筛选逻辑没出错 #

这是最容易踩坑的地方！你需要根据选中的筛选值，正确过滤源数据。比如假设你的数据对象有个category属性，筛选逻辑应该是这样的：

// 在render函数里计算筛选后的数据
const filteredData = this.state.selectedFilter === 'all'
  ? this.state.data // 选"全部"就返回所有数据
  : this.state.data.filter(item => item.category === this.state.selectedFilter);

这里要避开两个常见错误：

• 别把筛选条件写反（比如写成item.category !== 选中值），那肯定会得到空数组
• 确认单选按钮的value和数据对象的属性值完全匹配（比如单选value是"javascript"，数据里不能是"js"，否则匹配不上）

3. 给你一个完整的可运行示例 #

你可以对照这个示例调整自己的代码：

import React, { Component } from 'react';
import { Card, Radio, Segment, Container } from 'semantic-ui-react';
import '../css/app.css';

class FilterOptions extends Component {
  state = {
    selectedFilter: 'all',
    data: [
      { id: 1, title: 'React入门指南', category: 'react' },
      { id: 2, title: 'JavaScript进阶技巧', category: 'javascript' },
      { id: 3, title: 'CSS布局实战', category: 'css' },
    ],
  };

  handleFilterChange = (e, { value }) => {
    this.setState({ selectedFilter: value });
  };

  render() {
    const { selectedFilter, data } = this.state;
    // 核心筛选逻辑
    const filteredData = selectedFilter === 'all'
      ? data
      : data.filter(item => item.category === selectedFilter);

    return (
      <Container>
        <Segment>
          <Radio
            label="全部内容"
            name="filter"
            value="all"
            checked={selectedFilter === 'all'}
            onChange={this.handleFilterChange}
          />
          <Radio
            label="React相关"
            name="filter"
            value="react"
            checked={selectedFilter === 'react'}
            onChange={this.handleFilterChange}
          />
          <Radio
            label="JavaScript相关"
            name="filter"
            value="javascript"
            checked={selectedFilter === 'javascript'}
            onChange={this.handleFilterChange}
          />
          <Radio
            label="CSS相关"
            name="filter"
            value="css"
            checked={selectedFilter === 'css'}
            onChange={this.handleFilterChange}
          />
        </Segment>

        <Card.Group>
          {/* 渲染筛选后的数据 */}
          {filteredData.map(item => (
            <Card key={item.id}>
              <Card.Content>
                <Card.Header>{item.title}</Card.Header>
                <Card.Meta>分类: {item.category}</Card.Meta>
              </Card.Content>
            </Card>
          ))}
        </Card.Group>
      </Container>
    );
  }
}

export default FilterOptions;

4. 额外检查点 #

• 如果你的源数据是从props传入的，记得在componentDidUpdate或者用getDerivedStateFromProps（旧版React）同步状态，避免源数据没更新导致筛选异常
• 打开浏览器控制台看看有没有报错，比如数据undefined、属性名拼写错误，这些都会悄咪咪导致筛选失败

按照上面的步骤调整后，应该就能实现你想要的“选中特定按钮只渲染对应属性值对象”的效果啦~

内容的提问来源于stack exchange，提问作者Antonio Pavicevac-Ortiz