如何将对象数组过滤为两个新数组并分别赋值给React的useState

解决方案 #

方法1：单次遍历拆分（推荐，性能最优） #

仅遍历原数组1次完成两类数据的分类，适合数组数据量较大的场景：

// 封装拆分函数
const splitUnitStatus = () => {
  const availableTemp = []
  const assignedTemp = []
  units.forEach(unit => {
    if (unit.status === 'AVAILABLE') {
      availableTemp.push(unit)
    } else if (unit.status === 'ASSIGNED') {
      assignedTemp.push(unit)
    }
  })
  // 批量更新两个状态
  setAvailableUnits(availableTemp)
  setAssignedUnits(assignedTemp)
}

如果units是动态变化的数据源（比如接口返回数据、props传入值），可以搭配useEffect自动触发拆分：

useEffect(() => {
  const availableTemp = []
  const assignedTemp = []
  units.forEach(unit => {
    unit.status === 'AVAILABLE' ? availableTemp.push(unit) : assignedTemp.push(unit)
  })
  setAvailableUnits(availableTemp)
  setAssignedUnits(assignedTemp)
}, [units]) // units变化时自动重新执行拆分逻辑

方法2：两次filter实现（写法简洁） #

如果数组数据量不大，可以直接用两次filter实现，代码更简洁易读：

const splitUnitStatus = () => {
  setAvailableUnits(units.filter(unit => unit.status === 'AVAILABLE'))
  setAssignedUnits(units.filter(unit => unit.status === 'ASSIGNED'))
}

原代码未达预期的常见原因：

• 仅实现了availableUnits的更新，缺少assignedUnits的赋值逻辑
• 执行拆分时units还未完成赋值（比如异步接口还未返回数据），导致过滤结果为空
• 没有监听units的变化，数据源更新时没有重新触发拆分逻辑

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