Question

我正在尝试创建列表的过滤器。我写的代码是：

constructor(props) {
    super(props);
    this.state = {
        value: 'all',
        textfield: ''
    };
}

render() {
  let filteredPlatform = fullList.filter((el) => {
    return el.gameName.toLowerCase().indexOf(this.state.textfield) >= 0 && el.platform === this.state.value;
  });
  .....
  <Table data={filteredPlatform} />
}

平台值可以是所有， xbox ， ps4 等等。我想在开始时显示整个未过滤的列表（按平台），因为选择了 all 。任何提示？

Answer 1

我通常将其分解为一个单独的函数并使用if语句来处理“all”情况，但这是使用三元运算符执行此操作的另一种方法：

const filteredPlatform = fullList.filter( el =>
               el.gameName.toLowerCase().indexOf(this.state.textfield) >= 0 &&
               (el.platform === this.state.value || "all" === this.state.value )
            );

因此，如果this.state.value为“全部”，那么无论el.platform如何，我们都会返回。否则我们返回过滤后的版本。

另一种更具表现力的方式是使用2个过滤器：

const filteredPlatform = fullList
     .filter( el => el.gameName.toLowerCase().indexOf(this.state.textfield) >= 0 )
     .filter( el => el.platform === this.state.value || "all" === this.state.value );

Answer 2

你可以使用三元运算符并检查状态值是否为'all'然后分配fullList否则分配已过滤的List

let filteredPlatform = this.state.value === 'all' ? fullList : fullList.filter((el) => {
el.gameName.toLowerCase().indexOf(this.state.textfield) >= 0 && el.platform === this.state.value;
  });

Answer 3

如果没有选定的平台（all），则不会过滤列表。

  let filteredPlatform = this.state.value === 'all'
                         ? fullList : fullList.filter((el) => {
    return el.gameName.toLowerCase().indexOf(this.state.textfield) >= 0 && el.platform === this.state.value;
  });

如果选择了所有值，则显示列表中的所有结果

3 个答案: