我正在使用Mapbox
尝试从本地JSON文件渲染各种坐标。
但是,我收到错误TypeError: Object(...) is not a function
。我已经查找了可能导致它的原因的一些信息(例如,react
的早期版本无法与钩子一起使用),但是由于它非常模糊,我不知道如何正确诊断它。
我有一个使用React钩子的组件,我相信它是导致错误的原因。我无法确定我的软件包中的一个是否过时,是否与编写/设置/等功能有关,或者是否与其他软件包有关。
下面是一个JS小提琴,其中显示了完整的组件代码:https://jsfiddle.net/bsp7q839/
package.json:
"dependencies": {
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-map-gl": "^5.2.3",
"react-mapbox-gl": "^4.8.2",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.0",
"reactstrap": "^8.4.1",
"sass": "^1.26.1"
},
Component.js:
import React, { useState, useEffect } from 'react';
import ReactMapGL, { Marker, Popup } from "react-map-gl";
import * as crimeData from "../data/casefile-json.json";
export default function CrimeMap() {
const [viewport, setViewport] = useState({
// latitude, longitude, etc
})
const [selectedLocation, setSelectedLocation] = useState(null);
useEffect(() => {
const listener = (e) => {
if (e.key === 'Escape') {
setSelectedLocation(null);
}
};
window.addEventListener("keydown", listener);
return () => {
window.removeEventListener("keydown", listener)
}
}, [])
// etc
App.js:
import React from 'react';
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Header from "./components/Header.js";
import CrimeMap from "./components/CrimeMap.js";
import './App.css';
function App() {
return (
<BrowserRouter>
<div className="App">
<Header />
<CrimeMap />
<Switch>
<Route path="/crime_map" component={CrimeMap} exact />
</Switch>
{/* <Footer /> */}
</div>
</BrowserRouter>
)
}
export default App;
JSON代码段:
{
//
"fields": [
{
"name": "FID",
"type": "esriFieldTypeOID"
}
],
"cases": [
{
"attributes": {
"CaseNumber": 1,
"CaseName": "The Wanda Beach Murders",
"Episode Date (M/D/Y)": "1/9/2016",
"Length of Case": "1:14:02",
"Researched by": "Anonymous Host",
"CountryOfCrime": "Australia",
"StateOfCrime": "New South Wales",
"CityOfCrime": "Sydney"
},
"geometry": {
"x": -33.868820,
"y": 151.209290
}
},
答案 0 :(得分:0)
您应该能够在浏览器的控制台中单击错误,这应该带您到发生错误的文件/行。
例如,上面是我在您提供的jsfiddle中遇到的错误,可以单击var getId = "";
function handleClick(){
getId = this.id
}
$(".yaziaclass").click(handleClick.bind(this));
console.log(getId); // should have updated the global `getId` value
。这将向您显示错误发生的位置。
看起来这里的对象被用作函数,并且肯定会失败。尝试(index):32
设置一些您在错误行看到的值。可能是console.log
,如果未定义,则需要升级React npm软件包。