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字段更改了查询，并按状态对节点进行分组：

 allMysqlDealers {

  group(field: state) {

    edges {

      node {

        address

        city

        facebook

        houzz

        hrs_mf

        hrs_sat

        hrs_sun

        name

        page_title

        phone

        state

        subdomain

        yelp

        zip

      }

    }

  }

}

返回edges每个状态及其节点。

{

  "data": {

    "allMysqlDealers": {

      "group": [

        {

          "edges": [

            {

              "node": {

                "subdomain": "phoenix",

                "address": "15475 N. Greenway Hayden Loop, Ste. B-14",

                "state": "AZ",

                "zip": "85260",

                "city": "Scottsdale ",

                "facebook": "",

                "yelp": "",

                "houzz": "",

                "phone": "480-405-3378",

                "name": "x Desert Sky Doors and Closets",

                "hrs_sun": "Closed",

                "hrs_sat": "10:00 am to 4:00 pm",

                "hrs_mf": "9:00 am to 5:00 pm",

                "page_title": "One Day Doors & Closets"

              }

            },

            {

              "node": {

                "subdomain": "arizona",

                "address": "\"SHOWROOM COMING SOON\"",

                "state": "AZ",

                "zip": "85345",

                "city": "Phoenix",

                "facebook": "",

                "yelp": "",

                "houzz": "",

                "phone": "",

                "name": "x Artela Doors & Closets",

                "hrs_sun": "Closed",

                "hrs_sat": "By Appointment",

                "hrs_mf": "9:00 am - 5:30 pm",

                "page_title": "Artela Doors & Closets"

              }

            }

          ]

        }

      ]

    }

  }

}

    

然后，在我的组件中，我能够映射它们，就像这样......

const document = props.data.allMysqlDealers.group;

  if (!document) return null;

{document.map((groups: any, index: number) => {

          const state = groups.edges[0].node.state.trim();

          const stateName = convertRegion(state, toName);

          return (

            <Fragment key={`dealer-group-${index}`}>

              <Heading tag="h2" className={s.stateName}>{stateName}</Heading>

              <div className={s.row}>

                {groups.edges.map((dealer: any) => {

                  const now = new Date();

                  const days = formatHours(dealer.node);

                  const today = days[now.getDay()];

                  const todaysHours = `Today's Hours - ${today}`;

                  const info = formatInfo(dealer.node);

                  return (

                    <div className={s.dealer} key={`dealer-${dealer.node.name}`}>

                      <div className={s.dealer__info}>

                        <Heading tag="h2" className={s.name}>

                          {dealer.node.name}

                        </Heading>

                        <span>{todaysHours}</span>

                        <span className={s.address}>{dealer.node.address}</span>

                        <span className={s.city}>

                          {dealer.node.city}, {dealer.node.state} {dealer.node.zip}

                        </span>

                        <span className={s.email}>{dealer.email}</span>

                        <span className={s.phone}>{formatPhoneNumber(dealer.node.phone)}</span>

                      </div>

                      <Button

                        href={'/dealers/' + formatUrl(dealer.node.city + ' ' + dealer.node.state)}

                        className={s.button}

                        onClick={() => changeDealer(info)}

                      >

                        Choose Location

                      </Button>

                    </div>

                  );

                })}

              </div>

            </Fragment>

          );

        })}

...这一切都很顺利。