首页 > 解决方案 > React:在搜索框中过滤

问题描述

我正在尝试对从 API 获得的数据进行过滤。这是我尝试过的:

class ApiComponent extends Component {
  constructor() {
    super();
    this.state = {
      pizzas: [],
      input: "",
    };
  }
  onChangeHandler(e) {
    this.setState({
      input: e.target.value,
    });
  }
  componentWillMount() {
    axios.get("api/pizzas").then((Response) => {
      this.setState({
        pizzas: JSON.parse(JSON.stringify(Response.data)),
      });
    });
  }
  render() {
    const list = this.state.pizzas
      .filter((d) => this.state.input === "" || d === this.state.input)
      .map((d, index) => <li key={index}>{d}</li>);

    return (
      <div className="container">
        <form>
          <input
            value={this.state.input}
            type="text"
            onChange={this.onChangeHandler.bind(this)}
            placeholder="search"
          />
        </form>
        {this.state.pizzas.map((pizza) => (
          <ul key={pizza.id}>
            {pizza.area_id} &emsp;{pizza.name}&emsp;
            {pizza.real_name}
          </ul>
        ))}
      </div>
    );
  }
}

每当我尝试在搜索框中输入任何内容时,都会收到此错误:

未捕获的类型错误:d.includes 不是函数

我正在使用 es6。所以包括应该在那里。

标签: javascriptreactjs

解决方案


推荐阅读