类型错误：_data_homezone_json__WEBPACK_IMPORTED_MODULE_3__.data.map 不是函数

如何解决类型错误：_data_homezone_json__WEBPACK_IMPORTED_MODULE_3__.data.map 不是函数

在这里，我正在尝试使用 mapbox gl 标记该地点，并且我已经安装了 react-map-gl，并且还附上了我正在使用的 json 文件。它抛出上述错误 data.map is not a function 可以请一些人帮我解决这个问题。

homezone.js

import React,{useState} from 'react';
import ReactMapGL,{ Marker } from 'react-map-gl';
import * as zoneHome from '../../data/homezone.json';

const HomeZone = () => {
    const [ viewport,setViewport] = useState({
        latitude : -41.308734,longitude : 174.821595,width: "100vw",height: "100vh",zoom: 10
    })
    return (
        <div>
            <ReactMapGL {...viewport}
            mapboxApiAccessToken = {process.env.REACT_APP_MAPBOX_TOKEN}
            mapStyle = "mapbox://styles/aksharvijay/ckklz7npa1jaw17n4c6t5984x"
            onViewportChange = {viewport => {
                setViewport(viewport);
            }}
            >
                {zoneHome.data.map((zone) => (
                    <Marker latitude = {zone.geometry.coordinates[1]} longitude = {zone.geometry.coordinates[0]}>
                        <div>
                            home
                        </div>
                    </Marker>
                ))}
            </ReactMapGL>
        </div>
    )
}

export default HomeZone


homezone.json

{
    "type":"geojson","data":{
        "type":"Feature","geometry":{
            "type":"Polygon","coordinates":[
                [[-180,90],[-180,-90],[180,90]],[[174.813131,-41.328536],[174.812305,-41.328514],[174.812118,-41.330639],[174.812987,-41.330677],[174.813131,-41.328536]],[[174.821501,-41.304263],[174.819716,-41.306301],[174.818802,-41.309592],[174.81738,-41.3099],[174.812312,-41.315929],[174.813339,-41.320104],[174.819382,-41.31783],[174.821597,-41.314087],[174.823872,-41.312798],[174.826382,-41.307028],[174.826372,-41.305295],[174.825567,-41.305287],[174.821501,-41.304263]],[[174.773305,-41.27853],[174.773458,-41.280064],[174.773673,-41.281556],[174.773775,-41.282479],[174.773748,-41.282983],[174.773587,-41.283539],[174.772895,-41.284885],[174.772399,-41.285808],[174.769656,-41.285081],[174.769288,-41.285116],[174.768995,-41.28574],[174.767768,-41.287888],[174.767281,-41.287739],[174.767015,-41.287812],[174.766784,-41.288698],[174.766364,-41.290954],[174.766361,-41.291598],[174.766721,-41.291869],[174.766324,-41.292379],[174.76907,-41.293253],[174.76829,-41.294524],[174.760812,-41.292557],[174.760319,-41.293895],[174.765522,-41.296369],[174.7646,-41.298054],[174.768092,-41.299116],[174.768033,-41.300016],[174.769085,-41.302935],[174.771911,-41.307526],[174.771436,-41.309909],[174.779054,-41.311112],[174.781348,-41.310752],[174.781991,-41.312908],[174.787655,-41.31189],[174.786081,-41.306912],[174.78027,-41.30772],[174.780187,-41.306488],[174.779504,-41.305578],[174.781894,-41.301035],[174.787108,-41.302792],[174.791357,-41.295272],[174.790574,-41.293329],[174.792537,-41.292411],[174.795252,-41.29341],[174.79626,-41.293201],[174.798535,-41.29133],[174.800922,-41.287844],[174.800391,-41.287227],[174.793567,-41.290677],[174.790488,-41.289851],[174.78896,-41.290398],[174.788586,-41.291284],[174.78648,-41.291437],[174.786177,-41.2913],[174.786448,-41.290636],[174.786251,-41.290619],[174.785879,-41.2883],[174.785425,-41.288338],[174.78575,-41.290518],[174.784727,-41.290426],[174.783647,-41.290526],[174.783409,-41.289315],[174.780424,-41.289583],[174.780201,-41.288227],[174.779614,-41.287778],[174.779256,-41.286166],[174.779608,-41.285949],[174.77915,-41.283833],[174.779523,-41.283021],[174.779382,-41.282143],[174.779714,-41.281793],[174.780502,-41.281691],[174.780682,-41.281127],[174.78127,-41.281051],[174.781156,-41.280479],[174.781899,-41.280026],[174.782147,-41.279795],[174.780094,-41.278599],[174.782964,-41.27574],[174.783441,-41.275455],[174.78371,-41.275061],[174.78389,-41.274491],[174.783905,-41.274085],[174.783834,-41.273808],[174.782563,-41.271749],[174.781342,-41.269374],[174.779339,-41.267987],[174.769912,-41.275783],[174.771621,-41.276933],[174.773277,-41.276968],[174.773305,-41.27853]]
                ]
            }
        }
    }

解决方法

问题是您试图在对象上进行映射。 zoneHome.data 不是数组。您可以对数组执行 .map。

您需要更改数据结构以映射数组，或者仅映射 coordinates 数组。

{
  zoneHome.data.geometry.coordinates.map((zone) => (
    ...
  ))
};

,

map() 方法使用调用 a 的结果创建一个新数组 每个数组元素的函数。 map() 方法调用提供的 对数组中的每个元素执行一次，按顺序

关于您的问题数据是一个对象这就是您收到此错误的原因。要访问对象属性，您可以这样做

zoneHome.data.geometry.coordinates[0]

.

return (
        <div>
            <ReactMapGL {...viewport}
            mapboxApiAccessToken = {process.env.REACT_APP_MAPBOX_TOKEN}
            mapStyle = "mapbox://styles/aksharvijay/ckklz7npa1jaw17n4c6t5984x"
            onViewportChange = {viewport => {
                setViewport(viewport);
            }}
            >
                
                    <Marker latitude ={zoneHome.data.geometry.coordinates[1]} longitude = {zoneHome.data.geometry.coordinates[0]}>
                        <div>
                            home
                        </div>
                    </Marker>
              
            </ReactMapGL>
        </div>
    )