Ошибка при сопоставлении объекта graphQL в React - PullRequest
Новая
       19

Ошибка при сопоставлении объекта graphQL в React

0 голосов
/ 09 июля 2020

Я пытаюсь отобразить объект из запроса graphQL в React. Я получаю сообщение об ошибке, когда пытаюсь это сделать:

TypeError: Невозможно преобразовать undefined или null в объект

Вот компонент с сопоставлением: 

import React, {useContext, useEffect } from 'react'
import { COORDS } from "./coords"
import { useMileDispatch, useMileState } from './MileContext';
import { useQuery, useMutation } from '@apollo/react-hooks';
import { gql } from 'apollo-boost';
import Location from "./location";


    const CustomTrip = () => {
      const {locationOne, locationTwo} = useMileState()
      const dispatch = useMileDispatch()



      async function fetchDistance()
            {

                const res = await fetch("https://api.mapbox.com/directions-matrix/v1/mapbox/driving/" + locationOne + ";" + locationTwo + "?sources=1&annotations=distance&access_token=[token obscured]")
                console.log(res);
                const mapBoxObject = await res.json();
                console.log(mapBoxObject);
                const meters = mapBoxObject.distances[0];
                console.log(meters);
                const miles = (parseInt(meters) *  0.00062137119);
                const roundtrip = 2 * miles;

                console.log(miles.toFixed(2));

                dispatch({type: 'totalMilesUpdate', payload: roundtrip.toFixed(2)})

            }

        useEffect(() => {
            fetchDistance()
        }, [locationOne, locationTwo]);

      const LOCATIONS = gql`
        {
          locations {
            id
            slug
            gps
          }
        }
        `;
      const { loading, error, data } = useQuery(LOCATIONS);


      if (loading) return <p>Loading...</p>;
      if (error) return <p>Error :(</p>;

      return (
        <div>
          <h3>Customize your trip</h3>
            Mileage will be calculated as a round trip.
            <br/>
            Select your starting point

            <select value={locationOne} onChange={(event) => dispatch({type: 'locationOneChange', payload: event.target.value})}>
            {
                Object.entries(data.LOCATIONS).map(([slug, gps]) => (
                <Location />
            ))}
            </select>

            Select your destination
            <select value={locationTwo} onChange={(event) => dispatch({type: 'locationTwoChange', payload: event.target.value})}>
            {
                Object.entries(data.LOCATIONS).map(([slug, gps]) => (
                <Location />
            ))}
            </select>
        </div>
      )
    };

export default CustomTrip;

У меня также есть компонент с выбором здесь: 

import React, {useContext, useEffect } from 'react'
import { COORDS } from "./coords"
import { useMileDispatch, useMileState } from './MileContext';
import { useQuery, useMutation } from '@apollo/react-hooks';
import { gql } from 'apollo-boost';

const Location = () => {

  const LOCATIONS = gql`
        {
          locations {
            id
            slug
            gps
          }
        }
      `;
  const { loading, error, data } = useQuery(LOCATIONS);
  if (loading) return <option value="-73.778716,42.740913">ALB</option>;
  if (error) return <option value="-73.778716,42.740913">ALB</option>;


    return data.locations.map(({ slug, gps }) => (

            <option key={slug} value={gps}>
            {slug}
            </option>

    ))





};

export default Location;

Что я делаю не так, отсутствует какой-то синтаксис? Идея состоит в том, что я смогу выбрать местоположения из одного раскрывающегося списка для начальной точки, а во втором раскрывающемся списке будет пункт назначения. Затем api mapbox вычислит расстояние в метрах, и я затем конвертирую его в мили, чтобы передать это значение в состояние, в котором будут выполняться вычисления для определения затрат на рассматриваемую поездку. Это отлично работает, когда я использую простой объект, но я хотел улучшить приложение в целом, интегрировав api, который позволит пользователям добавлять / удалять / редактировать местоположения, а затем выполнять те же вычисления в этих местах.

edit благодаря @xadm я изменил синтаксис на Object.entries (data.locations) .map в первом компоненте, и он отлично работает, за исключением одного ... Теперь у меня все записи дублируются примерно 4 раза. Есть идеи, почему это так?

...