比较两个单独数组中对象的名称 属性 并在 React 中创建一个新的过滤数组

Question

在我的 React 组件中，我有一个名为 providerServices 的数组和一个名为 userServices 的数组。两者都包含多个名称为 属性 的对象。 在页面加载时，我需要一个过滤版本的 providerServices，它不包含任何与 userServices.

中的对象同名 属性 的对象

  useEffect(() => {
    userServices.map((us) => {
      setFilteredServices(providerServices.filter((service) => service.name !== us.name))
    })
  }, [])

我上面的代码只删除了第一个匹配的对象，而不是所有匹配的对象。非常感谢一些帮助或指导

Answer 1

您只需要从 providerServices 中过滤掉 .find 在 userServices

上的每个元素

providerServices.filter(function(providerServicesObj) {
  return !userServices.find(function(userServicesObj) {
    return providerServicesObj.name === userServicesObj.name
  })
})

Answer 2

这在 ES6 中应该可以正常工作，单行解决方案：

useEffect(() => {
    const filteredServices = providerServices.filter(({ name: providerServicesName }) => 
        !userServices.some(({ name: userServicesName }) => userServicesName === 
        providerServicesName));
    setFilteredServices(filteredServices);
  }, [])