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

Question

I am getting this error, but I thought this pertains to binding functions improperly.

Uncaught TypeError: this.seState is not a function

Essentially I have some data that I would like to filter using radio buttons.

Selecting a button of a particular value should only cause those objects with that value as their property to be rendered.

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>
    );
  }
}

Any help would be appreciated!

Answer 1

Change line from

this.seState({ data: filteredByPriority });

to

this.setState({ data: filteredByPriority });

Answer 2

Seems like a typo error. It's this.setState not this.seState .

Change it to: this.setState({ data: filteredByPriority });