reactjs - ReactHook 在不复制键的情况下添加数组状态的数组

Question

我正在尝试按单元名称添加数据分组以显示功能

const [allData , setAllData]= useState([{'unit':'' , data:[]}])   

 useEffect(async () => {
        await axios.get(`${BACKEND_URL}/data`).then(res => {
            res.data.map(elem => {
                setAllData(prev =>[...prev , { 'unit': elem.unitName, 'data': [elem.lessonName] }]);
            });
        });
    }, []);

结果是复制子数组的键，对于我的示例来说，它是“单元”：

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

标签： reactjsreact-hooks

Answer 1

尝试这样，如果发现唯一属性unit重写data或将新元素推送到数组

  useEffect(async () => {
    await axios.get(`${BACKEND_URL}/data`).then(res => {
        setAllData((prev) => {
          let result = [...prev];
          res.data.forEach(({ unitName: unit, lessonName }) => {
            const index = result.findIndex((elem) => elem.unit === unit);
            if (index >= 0) {
              result[index].data = [...result[index].data, lessonName]
            } else {
              result.push({unit, data: [lessonName]});
            }
          });
          return result;
        });
    });
  }, []);