未捕獲的類型錯誤：無法在 GoogleMapReact 讀取未定義的屬性（讀取“長度”）

Question

我正在使用 GoogleMapReact 組件開發應用程序並不斷收到錯誤消息，指出長度屬性未定義。 有什么我看不到的嗎？ 非常感謝所有反饋。 這些是我收到的錯誤代碼：

未捕獲的類型錯誤：無法讀取未定義的屬性（讀取“長度”）

react-dom.development.js:20085 組件出現上述錯誤：

未捕獲的類型錯誤：無法在 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;

在 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>

Answer 1

如果您正確發送道具，這應該可以工作。

將您的道具放在大括號中({coords, setCoords, setBounds, places, setChildClicked, weatherData})並以這種方式檢查長度和數據places?.length places?.map weatherData?.list?.map

Answer 2

如果您有反應 18，則 GoogleMapReact 組件存在問題

https://github.com/google-map-react/google-map-react/issues/1110

目前正確的解決方案是降級到版本 17 .. 希望對您有所幫助...