React单选按钮过滤内容时遇Uncaught TypeError: this.seState不是函数错误

嘿，我来帮你搞定这个问题！你遇到的Uncaught TypeError: this.seState is not a function，首先得揪出最明显的问题——你把setState拼写成seState了（少了一个t），这绝对是触发错误的核心原因之一！

除了拼写错误，类组件里事件处理函数的this绑定不当也是这类问题的常客，结合你用单选按钮过滤数据的需求，我给你梳理完整的解决方案：

1. 先修正setState的拼写 #

确保你在代码里写的是this.setState(...)，而不是this.seState(...)，这个低级错误很容易不小心犯，先检查一遍！

2. 正确绑定事件处理函数的this #

在React类组件中，如果你用普通函数定义事件处理器，this默认不会指向组件实例，所以需要手动绑定，有三种常用方式：

方式一：构造函数内绑定（推荐，性能最优）

constructor(props) {
  super(props);
  this.state = {
    selectedFilter: '', // 存储选中的单选按钮值
    // 你的数据源
    data: [...]
  };
  // 把this绑定到处理函数上
  this.handleRadioChange = this.handleRadioChange.bind(this);
}

方式二：用箭头函数定义处理函数

箭头函数会自动继承外层的this，不用手动绑定：

handleRadioChange = (e) => {
  const selectedValue = e.target.value;
  this.setState({ selectedFilter: selectedValue });
}

方式三：在JSX中直接用箭头函数（简单但不推荐频繁使用）

每次渲染都会创建新函数，小组件没问题，但大数据量场景可能影响性能：

<input 
  type="radio" 
  name="filter" 
  value="yourValue" 
  onChange={(e) => this.handleRadioChange(e)} 
/>

3. 完整的过滤实现示例 #

结合Semantic UI React的组件，给你写一个可直接参考的完整片段：

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

class FilterableData extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedFilter: '',
      data: [
        { id: 1, type: 'fruit', name: 'Apple' },
        { id: 2, type: 'vegetable', name: 'Carrot' },
        { id: 3, type: 'fruit', name: 'Banana' },
        { id: 4, type: 'vegetable', name: 'Spinach' }
      ]
    };
    this.handleRadioChange = this.handleRadioChange.bind(this);
  }

  handleRadioChange(e) {
    // 修正拼写+正确绑定this后，这里就能正常调用setState了
    this.setState({ selectedFilter: e.target.value });
  }

  // 过滤数据的方法
  getFilteredData() {
    const { data, selectedFilter } = this.state;
    // 如果没选中任何过滤项，返回全部数据
    if (!selectedFilter) return data;
    // 返回匹配选中值的数据
    return data.filter(item => item.type === selectedFilter);
  }

  render() {
    const filteredData = this.getFilteredData();
    return (
      <Container>
        <Header as="h2">Filter by Type</Header>
        <Segment>
          <label>
            <input
              type="radio"
              name="typeFilter"
              value="fruit"
              checked={this.state.selectedFilter === 'fruit'}
              onChange={this.handleRadioChange}
            />
            Fruits
          </label>
          <label style={{ marginLeft: '1.5rem' }}>
            <input
              type="radio"
              name="typeFilter"
              value="vegetable"
              checked={this.state.selectedFilter === 'vegetable'}
              onChange={this.handleRadioChange}
            />
            Vegetables
          </label>
          <label style={{ marginLeft: '1.5rem' }}>
            <input
              type="radio"
              name="typeFilter"
              value=""
              checked={this.state.selectedFilter === ''}
              onChange={this.handleRadioChange}
            />
            All Items
          </label>
        </Segment>
        <Divider />
        <Grid columns={2}>
          {filteredData.map(item => (
            <Grid.Column key={item.id}>
              <Card>
                <Card.Content>
                  <Card.Header>{item.name}</Card.Header>
                  <Card.Meta>Type: {item.type}</Card.Meta>
                </Card.Content>
              </Card>
            </Grid.Column>
          ))}
        </Grid>
      </Container>
    );
  }
}

export default FilterableData;

按照上面的步骤来，先修正拼写错误，再确保this绑定正确，就能解决这个TypeError，同时实现单选按钮过滤数据的需求啦！

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