为什么我的过滤功能不起作用？答案

【问题标题】：Why is my filter function not working?为什么我的过滤功能不起作用？
【发布时间】：2018-07-18 17:25:44
【问题描述】：

应该过滤列表的简单反应组件。不工作，我不知道为什么......

import React from 'react';

class Filter extends React.Component {
  state = {
    input: '',
    items: [{name: 'lol'}]
  }

  handleChange = (event) => this.setState({ input: event.target.value })

  render(){
    const { input, items } = this.state;
    return(
      <div>
        <input
          placeholder="search for an item"
          onChange={this.handleChange}
        />
        {items.filter(term => term.includes(input)).map((term) => (
          <div>{term.name}</div>
        ))}
      </div>
    )
  }
}

export default Filter;

从字面上过滤数组，然后对其进行映射....

【问题讨论】：

您应该添加更多详细信息，“不工作”并没有真正的帮助。但我想应该是term.name.includes(input)。
啊，就是这样。干杯！

标签： javascript arrays reactjs filter

【解决方案1】：

import React from 'react';

class Filter extends React.Component {
  state = {
    input: '',
    items: [{name: 'lol'}],
    filteredItems: false,
  } 

   filter(e) {
          var value = e.target.value;
          this.setState({filterval: value})

          this.setState({
            filteredItems: !value
              ? false
              : this.state.items.filter(function (item) {
                return item.name.toLowerCase().indexOf(value.toLowerCase()) !== -1;
              })
          })
        }


    render(){



            var list = this.state.filteredItems || this.state.items || []

            return (
             <div>
         <input placeholder="search for an item" onChange={this.filter.bind(this)}
        />
<div>

              {list.map((item,index) => (


                           <div>{term.name}</div>
                        ))}
</div>    
 </div>
 )

【讨论】：

您应该添加对更改内容和原因的说明。

【解决方案2】：

items.filter(term => term.includes(input))

这里的条件不正确。变量term 是一个对象{name: 'lol'}。 includes 不适用于对象。应该是term.name.includes(input) 或term.name === input

【讨论】：