javascript - 已解决：在反应客户端过滤结果数组

Question

我将从 graphql 返回的数据映射到一个反应应用程序。我已经使用 .filter() 来应用过滤客户端，但我无法弄清楚如何使过滤动态以供使用输入。我当前的代码是这样的：映射结果：

  const names = data?.venuesByCountry.filter(deliverFilter).map(v => (
    <>
      <FlexGridItem> 
        <Link href={`${config.frontendUrl}/${v.slug}`}>
          {v.isOrderingAvailable}
          {v.name}
          {v.isOrderingAvailable}
          {v.isPickUpAvailable}
        </Link>
      </FlexGridItem>
    </>
  ))

用于过滤结果的按钮：

    <Button onClick={() => pickUp()}>PICK UP</Button>
    <Button onClick={() => delivery()}>DELIVERY</Button>

我希望动态过滤结果的函数：

  function delivery(){
    deliverFilter = venuesByCountry => venuesByCountry.isDeliveryAvailable
  }
  function pickUp(){
    deliverFilter = venuesByCountry => venuesByCountry.isPickUpAvailable
  }

感谢你们的任何想法:)

标签： javascriptreactjstypescriptfiltergraphql

Answer 1

这应该有效：

过滤乐趣

function delivery(v) {
   return v.isDeliveryAvailable
  }

用法

...
const names = data?.venuesByCountry.filter(delivery).map(v => (
...