React-TypeScript:Property'；geo&x27；类型'中缺少；{}'；但类型为'；IMapProps

我正在练习打字。在我的React应用程序中，我从API获取了数据，我想使用地理位置的lat和lng，并将其传递给我的地图组件。在我的地图组件中，我使用了。我成功地展示了地图。在我的地图组件中，我制作了一个界面道具，如下所示：

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

如果我将geo设置为可选，如

geo:

则会显示地图，但如果设置为geo required，则会出现如下错误：

属性“geo”在类型“{}”中丢失，但在类型“IMapProps”中是必需的。另外，我不知道如何使用TypeScript中的道具

这是我的父组件，我在其中获取数据并计划传递映射组件。

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;

import React，{useffect，useState}来自“React”；
从“./Map”导入映射
导出接口数据{
id：编号；
名称：字符串；
用户名：字符串；
电子邮件：字符串；
地址:{
街道：字符串；
组曲：弦乐；
城市：字符串；
zipcode：数字；
地理：{
lat：数字；
液化天然气：数量；
};
};
电话号码:；
网站:string,；
公司：{
名称：字符串；
流行语：弦乐；
bs：字符串；
};
};
常量父项=（）=>{
const[state，setState]=useState（[]）
useffect（（）=>{
getData（）
}, [])
const getData=async（）=>{
const response=等待获取（“https://jsonplaceholder.typicode.com/users");
const data=wait response.json（）；
控制台日志（数据）；
设置状态（数据）；
};
返回(
{state.map（i=>）}//在这里，我将道具传递给map组件。但是在这之后，我不知道如何在TypeScript中使用porps
)
}
导出默认父级

这是我想使用道具的地图组件。

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;

import React，{useState}来自“React”；
从“谷歌地图反应”导入谷歌地图反应；
从“./Marker”导入标记
导出接口IMapProps{
地理：{
lat：数字；
液化天然气：数量；
}
}
常量映射=（{geo}:IMapProps）=>{
常量[状态，设置状态]=使用状态(
{
中心：{
纬度：60.1098678，
液化天然气：24.7385084
},
缩放：7
}
)
返回(
);
};
导出默认地图；
如果将
geo
设置为必填项，则子组件需要具有lat和long属性的
geo
属性。也就是说，当父组件尚未完成axios调用时，父组件的
状态
被初始化为
[]
，而您的
i.address.geo
基本上未定义，这会引发错误

解决方法：

您可以在子组件中保留
geo
选项
或者，您可以在父级
状态中具有初始
geo
类型值。i、 e

const[state，setState]=useState（{'address'：{'geo'：{
纬度：60.1098678，
液化天然气：24.7385084
}}})
如果将
geo
设置为必填项，则子组件需要具有lat和long属性的
geo
属性。也就是说，当父组件尚未完成axios调用时，父组件的
状态
被初始化为
[]
，而您的
i.address.geo
基本上未定义，这会引发错误

解决方法：

您可以在子组件中保留
geo
选项
或者，您可以在父级
状态中具有初始
geo
类型值。i、 e

const[state，setState]=useState（{'address'：{'geo'：{
纬度：60.1098678，
液化天然气：24.7385084
}}})
I已经在父组件的接口中初始化了geo.const parent=（）=>{const[state，setState]=useState（[]）…-这被初始化为[]另外，我想你不能在组件接口内初始化。在接口中，你只能声明类型。希望这是有帮助的。很抱歉回复太晚。你能告诉我如何在Map组件中使用道具吗？我已经在父组件的接口中初始化了geo。const parent=（）=>{const[state，setState]=useState（[]）…-这是初始化为[]而不是使用geo的。我认为您不能在组件接口内初始化。在接口中，您仅声明类型。希望这是有用的。很抱歉回复太晚。您能告诉我如何在Map组件中使用道具吗？对于
geo={I.address.geo}
，i

从何而来？它将帮助你理解我的意思：啊，是的，刚才看到了数组。映射在那里。是的，伙计。试着弄清楚如何在子组件中使用道具。你有什么建议吗？实际上我刚刚弄明白了：

geo={i.address.geo}

，我的

从哪里来？这将帮助你理解我的意思：啊，是的，我刚刚看到了数组。映射在那里。是的，伙计。试着弄清楚如何在子组件中使用道具。你有什么建议吗？实际上我刚刚弄明白了：D