[英]Uncaught TypeError: Cannot read properties of undefined (reading 'length') at GoogleMapReact
I am developing an app using the GoogleMapReact component and keep receiving an error stating that the length property is undefined.我正在使用 GoogleMapReact 组件开发应用程序并不断收到错误消息,指出长度属性未定义。 Is there something that I cant see?
有什么我看不到的吗? All feedback is greatly appreciated.
非常感谢所有反馈。 These are the error codes I am receiving:
这些是我收到的错误代码:
Uncaught TypeError: Cannot read properties of undefined (reading 'length')未捕获的类型错误:无法读取未定义的属性(读取“长度”)
react-dom.development.js:20085 The above error occurred in the component: react-dom.development.js:20085 组件出现上述错误:
Uncaught TypeError: Cannot read properties of undefined (reading 'length') at Map (Map.jsx:19:1)未捕获的类型错误:无法在 Map (Map.jsx:19:1) 处读取未定义的属性(读取“长度”)
import React from 'react';
import GoogleMapReact from 'google-map-react';
import { Paper, Typography, useMediaQuery } from '@material-ui/core';
import LocationOnOutlinedIcon from '@material-ui/icons/LocationOnOutlined';
import Rating from '@material-ui/lab/Rating';
import useStyles from './styles';
import mapStyles from './mapStyles'
const Map = (coords, setCoords, setBounds, places, setChildClicked, weatherData) => {
const classes = useStyles();
const matches = useMediaQuery('(min-width:600px)');
return (
<div className={classes.mapContainer}>
<GoogleMapReact
bootstrapURLKeys={{ key: process.env.REACT_APP_GOOGLE_MAPS_API_KEY }}
defaultCenter={coords}
center={coords}
defaultZoom={14}
margin={[50, 50, 50, 50,]}
options={{ disableDefaultUI: true, zoomControl: true, styles: mapStyles }}
onChange={(e) => {
setCoords({ lat: e.center.lat, lng: e.center.lng });
setBounds({ ne: e.marginBounds.ne, sw: e.marginBounds.sw });
}}
onChildClick={(child) => setChildClicked(child)}
>
{places.length && places.map((place, i) => (
<div
className={classes.markerContainer}
lat={Number(place.latitude)}
lng={Number(place.longitude)}
key={i}
>
{!matches ?
<LocationOnOutlinedIcon color="primary" fontSize="large" />
: (
<Paper elevation={3} className={classes.paper}>
<Typography className={classes.typography} variant="subtitle2" gutterBottom> {place.name}</Typography>
<img
className={classes.pointer}
src={place.photo ? place.photo.images.large.url : 'https://www.rlare.com/wp-content/uploads/2019/12/Inside-1-1.jpg'}
alt={place.name}
/>
<Rating size="small" value={Number(place.rating)} name="read-only" />
</Paper>
)}
</div>
))}
{weatherData?.list?.length && weatherData.list.map((data, i) => (
<div key={i} lat={data.coord.lat} lng={data.coord.lon}>
<img src={`https://openweathermap.org/img/w/${data.weather[0].icon}.png`} height="70px" alt="map"/>
</div>
))}
</GoogleMapReact>
</div>
);
}
export default Map;
In the app.js file I am using the map component as follows:在 app.js 文件中,我使用的地图组件如下:
<Grid item xs={12} md={8} style={{display: 'flex', justfiyContent: 'center', alignItems: 'center' }}>
<Map
setChildClicked={setChildClicked}
setCoordinates={setCoords}
setBounds={setBounds}
coordinates={coords}
place={filteredPlaces.length ? filteredPlaces : places}
weatherData={weatherData}
/>
</Grid>
This should work if you are sending the props correctly.如果您正确发送道具,这应该可以工作。
Put your props in curly brackets ({coords, setCoords, setBounds, places, setChildClicked, weatherData})
and check the length and data in this way places?.length
places?.map
weatherData?.list?.map
将您的道具放在大括号中
({coords, setCoords, setBounds, places, setChildClicked, weatherData})
并以这种方式检查长度和数据places?.length
places?.map
weatherData?.list?.map
if you have react 18 there is an issue with GoogleMapReact component如果您有反应 18,则 GoogleMapReact 组件存在问题
https://github.com/google-map-react/google-map-react/issues/1110 https://github.com/google-map-react/google-map-react/issues/1110
for the moment the correct solution is to downgrade to version 17 .. hope it helps...目前正确的解决方案是降级到版本 17 .. 希望对您有所帮助...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.