React-TypeScript: свойство 'geo' отсутствует в типе '{}', но требуется в типе 'IMapProps - PullRequest
Новая
       85

React-TypeScript: свойство 'geo' отсутствует в типе '{}', но требуется в типе 'IMapProps

1 голос
/ 09 мая 2020

Я практикую React-Typescript. В моем приложении React я получил данные из json API-заполнителя и из этого API я хочу использовать широту и долготу географического местоположения и передать их в компонент My Map. В компоненте «Карта» я использовал google-map-react . Я успешно отобразил карту. В моем компоненте «Карта» я создал опору интерфейса, которая выглядит следующим образом: 

export interface IMapProps {
  geo: {
    lat: number;
    lng: number;
  }
}

Если я сделал гео необязательным, например geo?: Карта появилась, но если было сделано гео, я получил такую ​​ошибку: Property 'geo' is missing in type '{}' but required in type 'IMapProps . Кроме того, я не знаю, как использовать Props в TypeScript.

Это мой родительский компонент, из которого я получил данные и планирую передать компонент Map. 

import React, { useEffect, useState } from 'react';
import Map from './Map'
export interface Data {
  id: number;
  name: string;
  username: string;
  email: string;
  address: {
    street: string;
    suite: string;
    city: string;
    zipcode: number;
    geo: {
      lat: number;
      lng: number;
    };
  };
  phone: number;
  website: string;
  company: {
    name: string;
    catchPhrase: string;
    bs: string;
  };
};

const Parent = () => {
  const [state, setState] = useState<Data[]>([])
  useEffect(() => {
    getData()
  }, [])
  const getData = async () => {
    const response = await fetch("https://jsonplaceholder.typicode.com/users");
    const data = await response.json();
    console.log(data);
    setState(data);
  };

  return (
    <div>
      {state.map(i => <Map geo={i.address.geo} />)} //IN HERE I am passing the props to the Map component. But after that I don't know how to use to porps in TypeScript

    </div>
  )
}



export default Parent

Это компонент My Map, в котором я бы люблю использовать свой реквизит. 

import React, { useState } from 'react';
import GoogleMapReact from 'google-map-react';
import Marker from './Marker'
export interface IMapProps {
  geo: {
    lat: number;
    lng: number;
  }
}

const Maps = ({ geo }: IMapProps) => {

  const [state, setstate] = useState(
    {
      center: {
        lat: 60.1098678,
        lng: 24.7385084
      },
      zoom: 7
    }
  )

  return (

    <div >
      <div style={{ height: '100vh', width: '100%' }}>
        <GoogleMapReact
          bootstrapURLKeys={{ key: "**********" }}
          defaultCenter={state.center}
          defaultZoom={state.zoom}
        >
          <Marker
            lat={state.center.lat}
            lng={state.center.lng}
            text="My Marker" />
        </GoogleMapReact>
      </div>
    </div>


  );
};



export default Maps;

1 Ответ

0 голосов
/ 09 мая 2020

Если вы установите geo обязательным, дочернему компоненту потребуется свойство geo со свойствами lat и long. Скажем, когда родительский компонент не завершил вызов ax ios, ваш родительский state инициализируется как [], а ваш i.address.geo в основном не определен, и это вызывает ошибку.

Ways To Исправление:

  1. Вы можете оставить geo необязательным в дочернем компоненте.
  2. Или вы можете иметь начальное значение типа geo в родительском state. т.е. 
const [state, setState] = useState<any>({'address': {'geo': {
        lat: 60.1098678,
        lng: 24.7385084
      }}})
...