Javascript React和hooks-获取类型错误：对象（…）不是函数

我正在使用

Mapbox

尝试从本地JSON文件渲染各种坐标

但是，我收到了错误

TypeError:Object（…）不是函数。我已经查找了一些可能导致它的信息（例如，
react
的早期版本不适用于钩子），但由于它非常模糊，我不知道如何正确诊断它

我有一个使用React钩子的组件，我相信它应该对错误负责。我不知道我的一个软件包是否过时，它是否与函数的编写/设置/等方式有关，或者它是否是其他东西

下面是一个JS提琴，显示了完整的组件代码：


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"
  },

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

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;

{
  //
  "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
        }
      },

Component.js:

"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"
  },

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

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;

{
  //
  "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
        }
      },

App.js:

"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"
  },

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

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;

{
  //
  "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
        }
      },

您应该能够单击浏览器控制台中的错误，这将带您到发生错误的文件/行


例如，上面是我在您提供的JSFIDLE中遇到的错误，
（索引）：可以单击32
。这将向您显示错误产生的位置

看起来这里有一个对象被用作函数，这肯定会失败。尝试
console.log
ing一些您在错误行中看到的值。比如说，
useState
，如果未定义，则需要升级React npm包