React Hook更新二维数组状态时unit键重复，如何按单元名分组存储数据？

你出现unit重复的核心原因是循环遍历接口返回数据时，未判断对应单元是否已存在，直接追加新元素导致的，同时循环内多次调用setState也会造成不必要的重渲染，推荐修改逻辑如下：

1. 先把接口返回的全部数据按单元名分组完成后，再一次性更新state
2. 不要在useEffect直接写async回调，避免React警告，将异步逻辑封装在内部函数执行

修改后的代码如下：

// 初始值设为空数组，去掉多余的空unit条目
const [allData, setAllData] = useState([])   

useEffect(() => {
    // 把异步逻辑写在内部函数里
    const fetchData = async () => {
        const res = await axios.get(`${BACKEND_URL}/data`)
        // 用临时对象做分组映射
        const unitMap = {}
        res.data.forEach(elem => {
            // 如果当前单元不存在就初始化
            if (!unitMap[elem.unitName]) {
                unitMap[elem.unitName] = []
            }
            // 把当前课时追加到对应单元的data数组里
            unitMap[elem.unitName].push(elem.lessonName)
        })
        // 把映射对象转成你需要的数组结构
        const formattedData = Object.entries(unitMap).map(([unitName, lessonList]) => ({
            unit: unitName,
            data: lessonList
        }))
        // 一次性更新state
        setAllData(formattedData)
    }
    fetchData()
}, []);

修改后你得到的allData结构就不会有重复unit，示例输出如下：

[
    {
        "unit": "unit 1",
        "data": [
            "LO1",
            "LO15"
        ]
    },
    {
        "unit": "unit 2",
        "data": [
            "LO2"
        ]
    },
    {
        "unit": "unit 3",
        "data": [
            "LO3"
        ]
    }
]

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