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

【问题标题】：SOLVED: Filtering results arrays in react client side已解决：在反应客户端过滤结果数组
【发布时间】：2020-05-24 17:18:18
【问题描述】：

我将从 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
  }

感谢你们的任何想法:)

【问题讨论】：

标签： javascript reactjs typescript filter graphql

【解决方案1】：

你应该使用组件状态来保持当前的过滤功能。

const [deliverFilter, setDeliverFilter] = useState(() => () => true)

...

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

【讨论】：

@Nicolas 你从 React 包中导入了useState 吗？
你能在codesandbox.io 上创建这个组件的最小工作示例吗？
由于useState 处理作为参数传递的函数的方式而更新了答案：reactjs.org/docs/hooks-reference.html#lazy-initial-state
所以上面的工作正常，但是，我个人会重构它，只保留过滤函数中使用的属性的名称。
过滤器函数应该返回一个布尔值，而不是一个空字符串。 cuisineV = ${cuisine}; - 这不是 JSX，不需要使用 ${} venuesByCountry.venueTypes = {cuisineV} - 这里也一样

【解决方案2】：

这应该可行：

过滤乐趣

function delivery(v) {
   return v.isDeliveryAvailable
  }

用法

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

【讨论】：