js数据处理一维数组对象转换为二维数组对象

//我这里用的hooks写法
  const [groupList, setGroupList] = useState([{ name: '', children: [] }])
Ï
	
//Ï当前数据结构
  const obj = [
    { name: '花花', value: '1', key: '1',group:'明星' },
    { name: '姚晨', value: '2', key: '2',group:'明星' },
    { name: '小绿', value: '3', key: '3',group:'草根' },
    { name: '小红', value: '4', key: '4',group:'草根' }
  ];
//处理后的数据结构
  const newObj = [
    {
      group: '明星', children: [
        { name: '花花', value: '1', key: '1', group: '明星' },
        { name: '姚晨', value: '2', key: '2', group: '明星' },
      ]
    }, {
      group: '草根', children: [
        { name: '小绿', value: '3', key: '3', group: '草根' },
        { name: '小红', value: '4', key: '4', group: '草根' }
      ]
    }
  ]
  const trans = (arr) => {
    let map = {};
    let newArr = [...arr]
    while (newArr.length) {
      let current = newArr.pop()
      map[curren.group] = map[curren.group] || []
      map[curren.group].unshift(current)
      //这里拿到的第一层对象是正序的，push为倒叙
    }  
    // 这里处理后有个弊端就是对象的key值为中文，不晓得会不会影响
	console.log(map)
    return Object.keys(map).map(key => map[key]) 
  }
  
  useEffect(() => {
    setGroupList(() => {
      let obj = { name: '', children: [] }
      let arr = []
      trans(fields).map((item, index) => {
        obj['name'] = item[0].group;
        obj.children = item
        arr.push({ ...obj })
      })
      return arr.reverse()
    })

  }, [obj]) // 因为这里一般情况都是从接口传递过来的，如果不是不写