javascript - 如何在 react 中过滤和显示数组

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

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

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

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