React中基于嵌套isActive值过滤API返回对象数组生成新数组的方法

场景1：筛选后的数据需要在组件渲染/其他逻辑中复用 #

先在组件内定义响应式状态存储激活单元数据：

import { useState, useEffect } from 'react';

// 组件内部
const [allUnits, setAllUnits] = useState([]);
const [activeUnits, setActiveUnits] = useState([]);

改造useEffect中的回调逻辑，推荐用reduce做单次遍历实现，避免多次遍历数组浪费性能，是当前场景的最优解：

useEffect(() => {
    const referenceEntityIDs = unitsField.map((i) => i.sys.id);
    Promise.all(referenceEntityIDs.map((id) => sdk.space.getEntry(id)))
    .then((data) => {
        // 一次遍历同时拿到所有单元、激活单元数据
        const { allUnits, activeUnits } = data.reduce((result, unit) => {
            const assetKey = unit.fields.assetKey["en-US"];
            result.allUnits.push(assetKey);
            if (unit.fields.isActive["en-US"]) {
                result.activeUnits.push(assetKey);
            }
            return result;
        }, { allUnits: [], activeUnits: [] });

        setAllUnits(allUnits);
        setActiveUnits(activeUnits);
    })
    .catch(() => {
        console.log("Units fail :(")
    });
// 注意：如果unitsField、sdk是组件内变量，需要补充到依赖数组中，避免闭包问题
}, [unitsField, sdk]);

场景2：筛选后的数据仅在当前then回调中临时使用 #

不需要创建state，直接定义普通变量即可：

.then((data) => {
    const getAllUnits = data.map((unit) => unit.fields.assetKey["en-US"]);
    setAllUnits(getAllUnits);

    // 直接定义临时变量使用
    const tempActiveUnits = data
        .filter(unit => unit.fields.isActive["en-US"])
        .map(unit => unit.fields.assetKey["en-US"]);
    
    // 后续直接用tempActiveUnits做逻辑处理即可
})

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