Typescript React 中的动态过滤

Question

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

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

Function 更改：

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>
          </>
        ))

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

Answer 1

这是一个如此困难的问题。 因为我们不知道你想要什么以及为什么声明一些 function 和变量。 所以，我猜你想要什么。

 /* 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>