Question

我正在尝试使用过滤器函数循环并删除我的一个数组。我知道我可以使用索引，但是，我想要显式并使用uniqueId。过滤器使用的是错误的东西吗？

[{
company: Company A,
title: Title A,
uniqueId: uniqueId
},
{
company: Company B,
title: Title B,
uniqueId: uniqueId
}]

路径：Function

this.setState({
      careerHistoryPositions: this.state.careerHistoryPositions.filter(uniqueId)
    });

Answer 1

正确的语法是：

careerHistoryPositions.filter(item => item.uniqueId === uniqueId)

但是，您可能不想使用已过滤的列表执行setState。使用您要对其进行过滤的uniqueId执行setState会更好。然后在render()函数中进行过滤。这样您就可以撤消或更改过滤器。

<强>更新

完整的解决方案可能如下所示：

class List extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = {
      filterId: null
    };
  }

  handleFilterChange(event) {
    this.setState({
      filterId: event.target.value,
    });
  }

  render() {
    const { careerHistoryPositions } = this.props;
    const { filterId } = this.state;

    const items = filterId
      ? careerHistoryPositions.filter(item => item.uniqueId === filterId)
      : careerHistoryPositions;

    return (
      <div>
        <input
          type="text"
          value={filterId}
          onChange={event => this.handleFilterChange(event)}
        />
        <ul>
          {items.map(item => (
            <li>{item.title} ({item.company})</li>
          ))}
        </ul>
      </div>
    )
  }
}

将.filter与uniqueId一起使用

1 个答案: