Javascript Typescript中的动态过滤

我正在尝试创建一个动态过滤器，如下所示： 设置状态：

  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
.减少（（附件，项目）=>{
item.venueTypes.forEach（v=>{
acc.indexOf（v）<0？acc.push（v）：空
})
返回acc
}, [])
.map（a=>(
过滤器C（a）}>
{a.toString（）.replace（/g/g'，）}
))

简化按钮：

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

const typeFilter=data？.venuesByCountry
.map（a=>(
过滤器C（a）}>
{a.toString（）.replace（/g/g'，）}
))

---

但不管出于什么原因，这实际上并没有为我过滤任何东西。。。有什么想法吗？这是一个很难回答的问题。因为我们不知道你想要什么，为什么要声明一些函数和变量。我猜你想要什么

/*eslint disable react/按钮具有类型*/
从“React”导入React；
导出接口测试道具{
venuesByCountry:地点
}
接口场地{
脉型：弦型；
}
接口数据{
venuesByCountry:地点[]
}
导出常量测试：React.FC=({
维努埃斯比国家，
}) => {
const isIncludes=（cuisineQuery:string）=>venuesByCountry.venueTypes.toString（）.includes（cuisineQuery）；
/**
*1.为什么你声明了这个状态，它在任何地方都没有呈现？。
*2.“foo”是什么？
*3.维努埃斯比国家在哪里？
*/
const[cuisineFilter，setCuisineFilter]=React.useState（isIncludes（'foo'）；
/**
*1.在哪里使用setData？
*/
const[data]=React.useState（null）；
/**
*我推荐这份备忘录。
*因为，数据过滤函数在每次渲染时都会执行。所以，请使用备注，当数据发生更改时，它会被过滤。
*/
const memorizedFiltereedCouries=React.useMoom（（）=>{
如果（！数据）{
返回[]；
}
/**
*1.为什么这个venuesByCountry是数组？
*/
返回数据。venuesByCountry.reduce（（会计科目，项目）=>{
如果（根据指数f<0）{
返回acc；
}
返回[…附件，项目]；
}, []);
}，[数据]；
/**
*1.venuesByCountry在哪里？
*2.所以，我宣布了道具
*/
常量过滤器=（cuisineQuery:string）=>{
setCuisineFilter（isIncludes（cuisineQuery））；
};
/**
*1.我不知道数据结构，只需声明任何值即可
*/
如果（！数据）{
返回。。。；
}
返回(
{memorizedFiltereedCuisine.map（（a:any）=>(
过滤器C（a）}>
{a.toString（）.replace（/g/g'，）}
))}
);
};

这是一个很难回答的问题。因为我们不知道你想要什么，为什么要声明一些函数和变量。我猜你想要什么


/*eslint disable react/按钮具有类型*/
从“React”导入React；
导出接口测试道具{
venuesByCountry:地点
}
接口场地{
脉型：弦型；
}
接口数据{
venuesByCountry:地点[]
}
导出常量测试：React.FC=({
维努埃斯比国家，
}) => {
const isIncludes=（cuisineQuery:string）=>venuesByCountry.venueTypes.toString（）.includes（cuisineQuery）；
/**
*1.为什么你声明了这个状态，它在任何地方都没有呈现？。
*2.“foo”是什么？
*3.维努埃斯比国家在哪里？
*/
const[cuisineFilter，setCuisineFilter]=React.useState（isIncludes（'foo'）；
/**
*1.在哪里使用setData？
*/
const[data]=React.useState（null）；
/**
*我推荐这份备忘录。
*因为，数据过滤函数在每次渲染时都会执行。所以，请使用备注，当数据发生更改时，它会被过滤。
*/
const memorizedFiltereedCouries=React.useMoom（（）=>{
如果（！数据）{
返回[]；
}
/**
*1.为什么这个venuesByCountry是数组？
*/
返回数据。venuesByCountry.reduce（（会计科目，项目）=>{
如果（根据指数f<0）{
返回acc；
}
返回[…附件，项目]；
}, []);
}，[数据]；
/**
*1.venuesByCountry在哪里？
*2.所以，我宣布了道具
*/
常量过滤器=（cuisineQuery:string）=>{
setCuisineFilter（isIncludes（cuisineQuery））；
};
/**
*1.我不知道数据结构，只需声明任何值即可
*/
如果（！数据）{
返回。。。；
}
返回(
{memorizedFiltereedCuisine.map（（a:any）=>(
过滤器C（a）}>
{a.toString（）.replace（/g/g'，）}
))}
);
};

为什么要使用
reduce（）
有一个大型数据源，它有许多场地，每个场地有多种类型，因此可能有50个“条形”，但我只需要一个“条形”按钮，所以我使用reduce来删除所有的倍数为什么要使用
reduce（）
有一个大型数据源，它有许多场地，每个场地都有多种类型，所以可能有50个“酒吧”，但我只想要一个“酒吧”按钮，所以我用reduce删除了所有的倍数