使用 Object.entries 对象实现数据列表的分组

Object.entries 方法太好用了，它可以将一个对象的可枚举属性键值对数组化。
假设我们需要将数据列表按状态分组。

1. 首先，对 dataList 按 status 进行分组：

  const groupByStatus = dataList.reduce((acc, item) => {
    if (!acc[item.status]) {
      acc[item.status] = [];
    }
    acc[item.status].push(item);
    return acc;
  }, {});

2. 遍历 groupByStatus 对象，为每个分组渲染不同的 JSX 元素：

Object.entries(groupByStatus).map(([status, items]) => {
  return (
    <View key={status}>
      <Text>{status === '1' ? '在线' : '离线'}</Text>
      {items.map(item => (
        <View key={item.id}>
          <Text>{item.name}</Text>
        </View>
      ))}
    </View>
  );
});

以前我的操作习惯是，创建2个新的数组，然后根据status值把数据push到对应的数组中，再分别渲染数据。如果这个结构比较复杂，我需要写两遍结构，代码太冗余了。

const groupByStatus = (list) => {
  const groups = {
    online: [],
    offline: [],
  };

  list.forEach((item) => {
    if (item.status === 1) {
      groups.online.push(item);
    } else {
      groups.offline.push(item);
    }
  });

  return groups;
};

const groupedData = groupByStatus(dataList);

//...
//使用这个 `groupedData` 对象进行渲染
<>
  {groupedData.online.map((item) => (
    <View key={item.id}>
      <Text>在线</Text>
    </View>
  ))}
  {groupedData.offline.map((item, index) => (
    <View key={item.id}>
      <Text>离线</Text>
      <Text>{index + 1}</Text>
    </View>
  ))}
</>

用了Object.entries 后，可以轻松地操作和使用对象了。以下是效果图：