如何在反应中过滤和显示数组

Question

我想通过在input 中输入的placeid 过滤和显示数组。

当我输入 1 时，我可以显示具有 placeid 1 的数组。

然而，在那之后，如果我输入2，什么也没有出现。

我的代码是这样的。

class List extends Component {
  constructor(props) {
    super(props)
    this.state = {
      val: ''
    }
  }
  _filterVal = e => {
    this.setState({ val: e.target.value })
  } 
  handleSetFilter = async () => {
      this.props.handleFilterVal(this.state.val);
  }
  render() {
    return (
      <div id="content">
        <div>
          <li>List</li>
          <input
            type="text"
            defaultValue=""
            onKeyUp={this._filterVal}
          />
          <button onClick={this.handleSetFilter} className='Filter'>Filter</button>
          { this.props.checkins.map((checkin, key) => {
            return(
              <div key={key}>
                <p>Placeid:{checkin.placeid}: ---- </p>
              </div>
            )
          })}
        </div>  
      </div>
    );
  }
}

export default PlaceList;

...
  handleFilterVal(val) {
    const line = this.state.lists.filter((item => {  
      return item.placeid.search( val ) !== -1; 
    }))
    this.setState({
      lists: line
    });
  }
...

另外，当我什么都不输入时，我想显示所有数组。

你能给我一些建议吗？

Answer 1

handleFilterVal(val) {
    const line = this.state.lists.filter((item => {  
      return item.placeid.search( val ) !== -1; 
    }))
    this.setState({
      lists: line
    });
  }

您在此处进行过滤，并将您的列表状态设置为“行”。当您单击以再次过滤另一个变量时，它将过滤“列表”中的内容（这就是您输入的原始值。）

如果您首先搜索 1，则 line 将只是一项。然后，当您再次过滤时，您将只过滤该项目。

您可能应该有一个过滤列表的状态部分并将过滤器的结果存储在那里，而不是覆盖列表。