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