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

Question

在这里，我正在尝试使用 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],[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]]
                ]
            }
        }
    }

Answer 1

问题是您试图映射到一个对象。 zoneHome.data 不是数组。你可以在数组上做.map。

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

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

Answer 2

map() 方法使用调用的结果创建一个新数组 每个数组元素的函数。 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>
    )