在 React 的对象数组中返回过滤后的嵌套数组

Question

我有一段数据处于 'serviceProviders' 状态，它保存的数据是这样的：

[
  {
    "id": 1,
    "name": "Mental Wellness",
    "services": [
      {
        "name": "Footcare & more",
        "serviceType": "Footcare",
        "location": {
          "lat": 43.65040363335024,
          "lng": -79.38396226829892
        }
      },
      {
        "name": "Brain Wellnes",
        "serviceType": "Mental",
        "location": {
          "lat": 43.655931348619475,
          "lng": -79.37928150811159
        }
      },
      {
        "name": "Physical service",
        "serviceType": "Physical",
        "location": {
          "lat": 43.70312522921196,
          "lng": -79.34393786935266
        }
      }
    ]
  }
]

我想编写一个函数，根据将 serviceType 与其他一些变量匹配来过滤嵌套数组（服务），并 return 使用更新的服务数组对整个对象进行过滤并设置新状态。

大致如下：

  const filter = () => {
    serviceProviders.map((provider) => {
      const filtered = provider.services.filter((service) => service.serviceType === 'Mental')
      setServiceProviders(serviceProviders => [...serviceProviders, serviceProviders.services = filtered ])
    })
  }

应该return:

[
  {
    "id": 1,
    "name": "Mental Wellness",
    "services": [
      {
        "name": "Brain Wellnes",
        "serviceType": "Mental",
        "location": {
          "lat": 43.655931348619475,
          "lng": -79.37928150811159
       }
    ]
  }
]

如有任何帮助，我们将不胜感激。谢谢。

Answer 1

首先，我建议使用 useMemo 挂钩创建转换集，这样您就不会改变原始数据。

根据您的评论将服务筛选为具有所选 serviceType 或的服务...

if there are no matches then return the original services array

试试这个...

const [ serviceProviders, setServiceProviders ] = useState([
  // your array data here
])
const [ serviceType, setServiceType ] = useState("Mental")

const providers = useMemo(() => {
  const predicate = svc => svc.serviceType === serviceType

  return serviceProviders.map(sp => ({
    ...sp,
    services: sp.services.some(predicate) // are there matches
      ? sp.services.filter(predicate) // yes, use the filtered array
      : [...sp.services] // no, clone the original array
  }))
}, [ serviceProviders, serviceType ]) // dependencies

只有当任一依赖项发生变化时，才会重新计算此记忆值。

如果您想完全过滤掉没有匹配项的顶级对象，请试试这个

return serviceProviders.filter(sp => sp.services.some(predicate))
  .map(sp => ({
    ...sp,
    services: sp.services.filter(predicate)
  }))

在 React 的对象数组中返回过滤后的嵌套数组

Returning a filtered nested array inside an array of objects in React

arrays

filter

reactjs

use-state