Typescript React 中的动态过滤答案

【问题标题】：Dynamic filtering in Typescript ReactTypescript React 中的动态过滤
【发布时间】：2020-05-25 09:06:53
【问题描述】：

我正在尝试像这样创建一个动态过滤器：设置状态：

  const [cuisineFilter, setCuisineFilter] = React.useState(() => (venuesByCountry: Venue) =>
    venuesByCountry.venueTypes.toString().includes('foo'),
  )

要改变的功能：

function filterC(cuisine: string) {
    setCuisineFilter(() => (venuesByCountry: Venue) => venuesByCountry.venueTypes.toString().includes(cuisine))
  }

遍历数组并创建独特的按钮：

const typeFilter = data?.venuesByCountry
    .reduce((acc, item) => {
      item.venueTypes.forEach(v => {
        acc.indexOf(v) < 0 ? acc.push(v) : null
      })
      return acc
    }, [])
    .map(a => (
      <>
        <Button $style={{ marginRight: '6px', marginBottom: '6px' }} onClick={() => filterC(a)}>
          {a.toString().replace(/_/g, ' ')}
        </Button>
      </>
    ))

简化按钮：

const typeFilter = data?.venuesByCountry
        .map(a => (
          <>
            <Button $style={{ marginRight: '6px', marginBottom: '6px' }} onClick={() => filterC(a)}>
              {a.toString().replace(/_/g, ' ')}
            </Button>
          </>
        ))

但无论出于何种原因，这实际上并没有为我过滤任何东西......任何想法？

【问题讨论】：

你为什么用reduce()
有一个大数据源，有很多场地，每个场地都有多种类型，所以可能有50个'bar'但我只想要一个'bar'按钮，所以我使用reduce来删除所有倍数

标签： javascript arrays reactjs typescript filter

【解决方案1】：

这个问题太难了。因为我们不知道你想要什么以及为什么要声明一些函数和变量。所以，我猜你想要什么。

/* eslint-disable react/button-has-type */
import React from 'react';

export interface TestProps {
  venuesByCountry: Venue
}

interface Venue {
  venueTypes: string;
}

interface Data {
  venuesByCountry: Venue[]
}

export const Test: React.FC<TestProps> = ({
  venuesByCountry,
}) => {
  const isIncludes = (cuisineQuery: string) => venuesByCountry.venueTypes.toString().includes(cuisineQuery);

  /**
   * 1. why you declared this state, it didn't rendered anywhere?.
   * 2. what is 'foo'?
   * 3. where is venuesByCountry?
   */
  const [cuisineFilter, setCuisineFilter] = React.useState(isIncludes('foo'));
  /**
   * 1. Where you use setData?
   */
  const [data] = React.useState<Data | null>(null);

  /**
   * I recommned memo.
   * because, data filtered function executed every render time. so, Use memo, it is filtered when data is changeed.
   */
  const memoizedFiltereedCuisine = React.useMemo(() => {
    if (!data) {
      return [];
    }
    /**
     * 1. why this venuesByCountry is array?
     */
    return data.venuesByCountry.reduce<any>((acc, item) => {
      if (acc.indexOf < 0) {
        return acc;
      }
      return [...acc, item];
    }, []);
  }, [data]);

  /**
   * 1. where is venuesByCountry?
   * 2. So, I declared props
   */
  const filterC = (cuisineQuery: string) => {
    setCuisineFilter(isIncludes(cuisineQuery));
  };

  /**
   * 1. I don't know data structure, just declare any values
   */
  if (!data) {
    return <span>...</span>;
  }

  return (
    <div>
      {memoizedFiltereedCuisine.map((a: any) => (
        <>
          <button style={{ marginRight: '6px', marginBottom: '6px' }} onClick={() => filterC(a)}>
            {a.toString().replace(/_/g, ' ')}
          </button>
        </>
      ))}
    </div>
  );
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

【讨论】：