Gatsby项目中JS Map如何按所属州分组展示经销商地点列表

核心实现逻辑 #

当前已将GraphQL查询获取的全量点位数组传入LocationList组件，无需改动现有GraphQL查询语句，仅在组件层做数据归组+分层渲染即可实现需求：

• 第一步：将扁平的全量点位数组，按所属州字段做归并拆分
  使用原生reduce方法将散点数据转换为「州名-对应点位列表」的键值对结构，避免引入第三方依赖：

  // 在_LocationList.tsx组件内，接收传入的locations参数后执行归组
  const groupedLocations = locations.reduce((group, location) => {
    // 兜底空值，避免无州信息的点位渲染异常
    const state = location.state?.trim() || '未标注地区'
    if (!group[state]) group[state] = []
    group[state].push(location)
    return group
  }, {})
  
  // 按州名字母序排序分组，保证页面渲染顺序稳定
  const sortedGroups = Object.entries(groupedLocations).sort((prev, next) => 
    prev[0].localeCompare(next[0])
  )
  

• 第二步：分层替换原有的单层遍历渲染逻辑
  不再直接map全量点位数组，改为外层遍历州分组、内层遍历对应州下的点位，实现分组标题+下属点位列表的结构：

  // 组件return部分替换原有渲染逻辑
  return (
    <div className="all-location-container">
      {sortedGroups.map(([stateName, stateLocations]) => (
        <div className="state-group-block" key={stateName}>
          {/* 州维度分组标题 */}
          <h3 className="group-title">{stateName}</h3>
          {/* 对应州的点位列表，复用你之前写的单点位渲染逻辑 */}
          <div className="location-list">
            {stateLocations.map(location => (
              <div className="location-card" key={location.id}>
                {/* 原有点位信息渲染：城市、详细地址等字段直接复用 */}
                <p>{location.city}, {location.address}</p>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  )
  

适配注意事项 #

• 以上逻辑完全兼容Gatsby的服务端渲染流程，无需调整页面层的GraphQL查询代码，改动范围仅在_LocationList.tsx组件内部。
• 如果需要调整分组的排序规则（比如按点位数量排序、指定特定州排最前），只需要修改sortedGroups的排序比较逻辑即可，不影响核心归组流程。
• 可直接在分组节点上扩展折叠/展开、锚点跳转等交互能力，无需重构数据结构。

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