时间戳

首页 > 解决方案 > 尝试根据过滤器选择用字符串值填充数组，并通过将数组与记录属性的字符串值进行比较来过滤记录

javascript - 尝试根据过滤器选择用字符串值填充数组，并通过将数组与记录属性的字符串值进行比较来过滤记录

问题描述

我有一个 API 响应，它返回一个记录列表，每个记录都有一个“状态”属性。状态可以是“当前”、“以前”、“从不”。

我有一组 3 个复选框，每个复选框都有一个值，用户单击该值以相应地过滤记录列表。

我试图实现过滤功能的方式是使用钩子const [statuses, setStatuses] = useState<string[]>([]);

然后使用来自以下位置的每个复选框的值填充该数组：

<div>FILTER BY STATUS</div>
 <FilterSection>
  <span><input type="checkbox" value="Current" onClick={handleStatusChange}/> Current</span>
  <span><input type="checkbox" value="Former" onClick={handleStatusChange}/> Former</span>
  <span><input type="checkbox" value="Never" onClick={handleStatusChange}/> Never </span>
 </FilterSection>
</div>

然后我有调用handleStatusChange的onClick方法：

  const handleStatusChange = e => {
    setStatuses([...statuses, e.target.value]);
    props.onFilterChange(statuses, state)
    console.log('status value: ', e.target.value)
  };

它将其值传递给容器组件并输入过滤器函数，如下所示：

  const handleFilterChange = (status: string[], state: string) => {
    store.set('currentPage')(0);
    const allLocations = store.get('locations');
    let filteredLocations = allLocations.slice();
    const pageSize = store.get('pageSize');

    if (status && status.length > 0) {
      filteredLocations = filteredLocations
        .filter(l => {
          l.financialDetails && l.financialDetails.locationStatus === status;
        })
        .slice();
    }

    store.set('filteredLocations')(filteredLocations);
    const pagedLocations = filteredLocations.slice(0, pageSize);
    store.set('pagedLocations')(pagedLocations);
    store.set('locationsLoading')(false);
  };

我看到的问题是我在里面handleFilterChange说TypeScript 错误This condition will always return 'false' since the types 'string' and 'string[]' have no overlap.

编辑 我已经更新了handleStatusChange函数并且它正在填充数组但仅在第二次单击复选框时。因此，在第一次单击时，它会生成一个空数组，在第二次单击时，它会抓取第一次单击的值并将其推送到数组中，这样它总是在用户实际选择的内容之后单击一次。

标签： javascriptarraysreactjstypescript

解决方案

我认为这样的事情会奏效。

const handleStatusChange = e => {
  const status = e.target.value;

  if (!statuses.includes(status)) {
    setStatuses(statuses.concat(status));
  }
  else {
    const statusIndex = statuses.findIndex(status);
    statuses.splice(statusIndex, 1);
    setStatuses(statuses);
  }

  props.onFilterChange(statuses)
};

而对于 handleFilterChange...

  const handleFilterChange = (statuses: string[]) => {
    const allLocations = store.get('locations');
    let filteredLocations = allLocations.slice();

    if (statuses && statuses.length) {
      statuses.forEach((status) => {
        filteredLocations = filteredLocations
          .filter(l => (l.financialDetails && l.financialDetails.locationStatus !== status));
    }

    const pagedLocations = filteredLocations.slice(0, pageSize);
  };

我删除了一些我认为与问题无关的代码。

推荐阅读