Question

我正在练习React-Typescript。在我的React应用程序中，我从json placeholder API和该API中获取了数据，我想使用地理位置的经纬度和经度并将其传递给“我的地图”组件。在我的地图组件中，我使用了google-map-react。我成功显示了地图。在我的Map组件中，我制作了一个界面道具，如下所示：

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

如果我将地理位置设为geo?:之类的可选地图，但出现地图，但如果要求设置地理位置，则出现如下错误：Property 'geo' is missing in type '{}' but required in type 'IMapProps。另外，我不知道如何在TypeScript中使用Props。

这是我的上级组件，我在其中获取了数据并计划传递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

这是我的地图组件，我想在其中使用道具。

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;

Answer 1

如果您设置geo为必填项，则子组件需要具有lat和long属性的geo属性。可以这么说，当父组件尚未完成axios调用时，您的父state被初始化为[]，而您的i.address.geo基本上是未定义的，这会引发错误。

解决方法：

您可以在子组件中保留geo可选项。
或者，您可以在父geo中有一个初始state类型值。即

const [state, setState] = useState<any>({'address': {'geo': {
        lat: 60.1098678,
        lng: 24.7385084
      }}})

React-TypeScript：类型“ {}”中缺少属性“ geo”，但类型“ IMapProps”中必需

1 个答案: