React中过滤对象数组内的嵌套services数组并更新state的实现方法

原代码问题说明 #

• 直接修改了原状态对象的services属性，违反React状态不可变更新原则
• map遍历未返回处理后的对象，没有生成新的数组结构
• 状态更新时向原数组追加元素，而非替换原有provider对象的services属性，逻辑完全不符合需求

正确实现代码 #

可以把要匹配的serviceType作为参数传入，提高函数复用性：

const filterServicesByType = (targetServiceType) => {
  // 不可变更新：生成全新的状态数组
  const updatedProviders = serviceProviders.map(provider => {
    // 过滤当前provider下符合条件的服务
    const filteredServices = provider.services.filter(
      service => service.serviceType === targetServiceType
    )
    // 返回新对象：保留原有所有属性，仅替换services为过滤后的结果
    return {
      ...provider,
      services: filteredServices
    }
  })
  // 直接传入新数组更新状态
  setServiceProviders(updatedProviders)
}

// 调用示例：过滤类型为Mental的服务
filterServicesByType('Mental')

如果担心当前获取的serviceProviders不是最新状态，可以用状态更新回调的写法：

const filterServicesByType = (targetServiceType) => {
  setServiceProviders(prevProviders => {
    return prevProviders.map(provider => {
      const filteredServices = provider.services.filter(
        service => service.serviceType === targetServiceType
      )
      return {
        ...provider,
        services: filteredServices
      }
    })
  })
}

可选优化 #

如果需要过滤掉没有符合条件服务的provider，可以在map后追加过滤逻辑，避免出现services为空数组的provider对象：

const updatedProviders = serviceProviders.map(/* 上述过滤逻辑 */)
  .filter(provider => provider.services.length > 0)

内容的提问来源于stack exchange，提问作者Ben Shekhtman