javascript 地图的分组结果

Question

我的 Gatsby 网站上有一个页面，用于查询许多企业的信息，包括它们的地址、城市和州，这允许我将数据传递到我的组件（在本例中），并映射结果LocationList。我想知道是否可以更精确地分割结果，以便我可以用标题（即“加利福尼亚州”）分隔位置，在其下面是加利福尼亚州或“亚利桑那州”的所有位置，在其下面是所有亚利桑那州的地点？我正在 Gatsby/GraphQl 中构建，我将包含我认为必要的所有代码，但请随时要求更多或澄清。

地点.tsx

/* eslint-disable react/display-name */

import React from 'react';

import useAxios from 'axios-hooks';

import { SEO } from 'components/seo/SEO';

import { graphql } from 'gatsby';

import { LocationList } from './locations/location-list/_LocationList';

import { Map } from './locations/map/_Map';

export default (props: any) => {

  const document = props.data.allPrismicLocator.edges[0];

  if (!document) return null;

  const dealers = props.data.allMysqlDealers.edges;

  if (!dealers) return null;

  const [{ data, loading }] = useAxios(`${process.env.GATSBY_API_ENDPOINT}`);

  return (

    <>

      <SEO

        title={document.node.data.meta_title}

        desc={document.node.data.meta_description}

        banner={document.node.data.social_image.url}

      />

      <Map data={data} document={document.node.data} />

      <LocationList data={dealers} loading={loading} />

    </>

  );

};

export const query = graphql`

  query LocatorQuery {

    allPrismicLocator {

      edges {

        node {

          data {

            meta_title

            meta_description

            copy {

              text

            }

            theme

            location {

              latitude

              longitude

            }

            social_image {

              url

              dimensions {

                height

                width

              }

              alt

            }

            page_title {

              text

            }

          }

        }

      }

    }

Answer 1

明白了这一点。我使用内置group字段更改了查询，并按状态对节点进行分组：&nbsp;allMysqlDealers {&nbsp; group(field: state) {&nbsp; &nbsp; edges {&nbsp; &nbsp; &nbsp; node {&nbsp; &nbsp; &nbsp; &nbsp; address&nbsp; &nbsp; &nbsp; &nbsp; city&nbsp; &nbsp; &nbsp; &nbsp; facebook&nbsp; &nbsp; &nbsp; &nbsp; houzz&nbsp; &nbsp; &nbsp; &nbsp; hrs_mf&nbsp; &nbsp; &nbsp; &nbsp; hrs_sat&nbsp; &nbsp; &nbsp; &nbsp; hrs_sun&nbsp; &nbsp; &nbsp; &nbsp; name&nbsp; &nbsp; &nbsp; &nbsp; page_title&nbsp; &nbsp; &nbsp; &nbsp; phone&nbsp; &nbsp; &nbsp; &nbsp; state&nbsp; &nbsp; &nbsp; &nbsp; subdomain&nbsp; &nbsp; &nbsp; &nbsp; yelp&nbsp; &nbsp; &nbsp; &nbsp; zip&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; }}返回edges每个状态及其节点。{&nbsp; "data": {&nbsp; &nbsp; "allMysqlDealers": {&nbsp; &nbsp; &nbsp; "group": [&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "edges": [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "node": {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "subdomain": "phoenix",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "address": "15475 N. Greenway Hayden Loop, Ste. B-14",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "state": "AZ",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "zip": "85260",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "city": "Scottsdale ",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "facebook": "",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "yelp": "",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "houzz": "",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "phone": "480-405-3378",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "name": "x Desert Sky Doors and Closets",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "hrs_sun": "Closed",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "hrs_sat": "10:00 am to 4:00 pm",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "hrs_mf": "9:00 am to 5:00 pm",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "page_title": "One Day Doors & Closets"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "node": {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "subdomain": "arizona",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "address": "\"SHOWROOM COMING SOON\"",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "state": "AZ",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "zip": "85345",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "city": "Phoenix",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "facebook": "",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "yelp": "",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "houzz": "",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "phone": "",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "name": "x Artela Doors & Closets",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "hrs_sun": "Closed",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "hrs_sat": "By Appointment",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "hrs_mf": "9:00 am - 5:30 pm",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "page_title": "Artela Doors & Closets"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; }&nbsp; }}&nbsp; &nbsp;&nbsp;然后，在我的组件中，我能够映射它们，就像这样......const document = props.data.allMysqlDealers.group;&nbsp; if (!document) return null;{document.map((groups: any, index: number) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const state = groups.edges[0].node.state.trim();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const stateName = convertRegion(state, toName);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Fragment key={`dealer-group-${index}`}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Heading tag="h2" className={s.stateName}>{stateName}</Heading>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className={s.row}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {groups.edges.map((dealer: any) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const now = new Date();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const days = formatHours(dealer.node);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const today = days[now.getDay()];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const todaysHours = `Today's Hours - ${today}`;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const info = formatInfo(dealer.node);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className={s.dealer} key={`dealer-${dealer.node.name}`}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className={s.dealer__info}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Heading tag="h2" className={s.name}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {dealer.node.name}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Heading>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>{todaysHours}</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span className={s.address}>{dealer.node.address}</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span className={s.city}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {dealer.node.city}, {dealer.node.state} {dealer.node.zip}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span className={s.email}>{dealer.email}</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span className={s.phone}>{formatPhoneNumber(dealer.node.phone)}</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Button&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; href={'/dealers/' + formatUrl(dealer.node.city + ' ' + dealer.node.state)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className={s.button}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onClick={() => changeDealer(info)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Choose Location&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Fragment>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; })}...这一切都很顺利。