0

我正在尝试将 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
4

0 回答 0