错误：无效的挂钩调用 Hooks 只能在函数组件的主体内部调用，同时将 kepler.gl 添加到 React 项目

问题描述

我正在尝试将 kepler.gl 项目添加到我的 React 项目中。我的做法是将 kepler.gl 添加为一个单独的文件夹并将其绑定，而不是通过 npm install kepler.gl。

为了更清楚地解释，

我开始了一个 Create React App 项目：

npx create-react-app my-app

我将 kepler.gl 作为整个项目下载：

https://github.com/keplergl/kepler.gl

我将 kepler.gl 项目与 CRA 项目放在同一目录中。 然后，我将 kepler.gl 添加到要安装的 package.json 依赖项。

"kepler.gl": "file:../kepler.gl-master"

然后我将 KeplerGl 组件导入到 CRA 项目中，如下所示：

import './App.css';
import { Provider } from 'react-redux';
import { applyMiddleware,combineReducers,createStore } from 'redux';
import  keplerglreducer from 'kepler.gl/reducers'
import { taskMiddleware } from 'react-palm/tasks'
import KeplerGl from 'kepler.gl'

const TOKEN = "TOKEN";

const reducers = combineReducers({
  keplerGl: keplerglreducer
})

const store = createStore(reducers,{},applyMiddleware(taskMiddleware)) 

function App() {
  return (
    <Provider store={store}>
      <KeplerGl
      mapBoxApiAccesstoken={TOKEN}
      />
    </Provider>
  );
}

export default App;

然后我得到错误：

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This Could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）