在React中使用单选按钮过滤内容

Question

我收到此错误，但我认为这与绑定功能有关。

未捕获的TypeError：this.seState不是函数

本质上，我有一些要使用单选按钮过滤的数据。

选择具有特定值的按钮应仅导致呈现具有该值作为其属性的那些对象。

import React, { Component } from 'react';

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

class FilterOptions extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: this.props.data,
      priority: '',
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    var val = e.target.value;
    this.setState({ priority: val });
    this.props.changeOption(val);
  }

  render() {
    return (
      <div>
        <ul>
          <li>
            <label>
              <input type="radio" value="1" checked={this.state.priority === '1'} onChange={this.handleChange} />
              1
            </label>
          </li>
          <li>
            <label>
              <input type="radio" value="2" checked={this.state.priority === '2'} onChange={this.handleChange} />
              2
            </label>
          </li>
          <li>
            <label>
              <input type="radio" value="3" checked={this.state.priority === '3'} onChange={this.handleChange} />
              3
            </label>
          </li>
          <li>
            <label>
              <input type="radio" value="4" checked={this.state.priority === '4'} onChange={this.handleChange} />
              4
            </label>
          </li>
        </ul>
      </div>
    );
  }
}

function FilterUsers(props) {
  return (
    <Container>
      <br />
      <br />
      <Grid columns={3} doubling stackable>
        {props.data.map((user) => (
          <Grid.Column key={user.name}>
            <Segment>
              <Card>
                <Card.Content>
                  <Card.Header>
                    <h2>name: {user.name}</h2>
                  </Card.Header>
                  <Card.Meta>
                    <span className="card__age">age: {user.age}</span>
                  </Card.Meta>
                  <Card.Description>priority: {user.priority}</Card.Description>
                  <Card.Description className="card__catergory">category: {user.category}</Card.Description>
                </Card.Content>
              </Card>
            </Segment>
          </Grid.Column>
        ))}
      </Grid>
    </Container>
  );
}

export default class SortAndFilterForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: this.props.data,
      priority: '',
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(val) {
    this.setState({ priority: val });
    // var filteredByPriority = this.props.data.sort((a, b) => a.priority - b.priority);
    var filteredByPriority = this.props.data.filter(function(item) {
      return item.priority === val;
    });
    this.seState({ data: filteredByPriority });
    console.log(filteredData, val);
  }
  render() {
    return (
      <div>
        <h1>Sorts</h1>
        <FilterOptions data={this.state.data} changeOption={this.handleChange} />
        <FilterUsers data={this.state.data} />
      </div>
    );
  }
}

任何帮助，将不胜感激！

Answer 1

更改行从

this.seState({ data: filteredByPriority });

至

this.setState({ data: filteredByPriority });

Answer 2

好像有错字。 这是this.setState而不是this.seState 。

更改为： this.setState({ data: filteredByPriority });