未处理的拒绝TypeError：zone.filter 不是函数

如何解决未处理的拒绝TypeError：zone.filter 不是函数

在这里，我正在尝试使用 MapBox gl 标记该地点，并且我已经安装了 react-map-gl 它引发了上述错误 Unhandled Rejection (TypeError): zone.filter is not a function。在这里，我正在尝试使用 MapBox gl 标记该地点，并且我已经安装了 react-map-gl 它引发了上述错误 Unhandled Rejection (TypeError): zone.filter is not a function。

有人可以帮我解决这个问题吗？这里做错了什么？

HomeZones.js

import React,{ Component } from 'react';
import ReactMapGL,{Marker} from 'react-map-gl';

export default class HomeZones extends Component {
    state = {
        viewport : {
            latitude : -41.308734,longitude : 174.821595,width: "100vw",height: "100vh",zoom: 10  
        },zoneHome : [],uLocation : {}
    }

    componentDidMount () {
        this.fetchzone();
    }

    filterZoneHome = zone => {
        return zone.filter(spot => {
            return spot.type === "polygon";
         });
    };

    fetchzone = () => {
        fetch(`https://api.mevo.co.nz/public/home-zones/all.json`)
        .then(res => res.json())
        .then(zone => {
            let zoneHom = this.filterZoneHome(zone);
           this.setState({
              zoneHome: zoneHom
           });
         });
      };

      zoneHomeHandler = () => {
        return this.state.zoneHome.map(spot => {
          return (
            <Marker
               latitude={parseFloat(spot.latitude)}
               longitude={parseFloat(spot.longitude)}
            >
              <img src="https://assets.mevo.co.nz/brand/logo-brand.svg" alt="" />
            </Marker>
          );
        });
      };
    render() {
        
        return (
            <div>
        <ReactMapGL {...this.state.viewport}
             mapStyle = "mapBox://styles/aksharvijay/ckklz7npa1jaw17n4c6t5984x"
             onViewportChange = {viewport => this.setState( { viewport})}
             mapBoxApiAccesstoken = "pk.eyJ1IjoiYWtzaGFydmlqYXkiLCJhIjoiY2trbHh6MXhwMW9vazMxb2R3ajUxODZuaSJ9.nT6OhBEGqYls_SIZPqjw1w"
             >
                 {Object.keys(this.state.uLocation).length !== 0 ? (
                     <Marker
                     latitude = {this.state.uLocation.lat}
                     longitude = {this.state.uLocation.long}>
                         <img src="https://assets.mevo.co.nz/brand/logo-brand.svg" alt="" />
                     </Marker>
                 ) : (
                     <div></div>
                 )
                
                }
                {this.zoneHomeHandler}
            </ReactMapGL>
                
            </div>
        )
    }
}

解决方法

你的错误是你的 fetch 结果是一个对象（.json() 返回 javascript 对象）而 filter 是一个数组方法。

我想你想过滤这个结果的坐标，所以你必须从这个对象中获取 coordinates 数组。查看 https://api.mevo.co.nz/public/home-zones/all.json 并研究对象的结构。