useLeafletContext()只能在<MapContainer>的子代中使用
我正在使用react-leaflet和react-leaflet-markercluster将React中的leaflet-map转换为钩子。除了MarkerCluster组件的使用之外，一切都运行得很好。应用程序会给出这个错误：Error: No context provided: useLeafletContext() can only be used in a descendant of <MapContainer>
我尝试做与此代码框中完全相同的事情，包括使用相同版本的包：https://codesandbox.io/s/9binx?file=/src/styles.scss:168-206
在现有的项目和一个全新的项目中(create-react-app)。它在现有项目中仍然会给出相同的错误。fresh项目也是如此，但在从package.json中删除以下代码时已修复：
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]不过，这从来没有出现在现有的项目中。以下是现有项目的package.json：
{
"version": "0.1.0",
"private": true,
"dependencies": {
"@reduxjs/toolkit": "1.4.0",
"@sentry/react": "5.27.1",
"@sentry/tracing": "5.27.1",
"classnames": "^2.3.1",
"http-proxy-middleware": "1.0.6",
"leaflet": "^1.7.1",
"leaflet.markercluster": "^1.5.1",
"moment": "2.29.1",
"normalize.css": "8.0.1",
"rc-slider": "9.5.4",
"react": "17.0.1",
"react-app-polyfill": "2.0.0",
"react-datepicker": "3.3.0",
"react-dates": "21.8.0",
"react-dom": "17.0.1",
"react-html5-camera-photo": "1.5.4",
"react-leaflet": "^3.2.1",
"react-leaflet-markercluster": "^3.0.0-rc1",
"react-markdown": "5.0.2",
"react-query": "2.25.2",
"react-redux": "7.2.2",
"react-responsive-pinch-zoom-pan": "0.3.0",
"react-router-dom": "4.3.1",
"react-scripts": "4.0.0",
"react-select": "3.1.0",
"redux": "4.0.5",
"redux-actions": "2.6.5",
"redux-devtools-extension": "2.13.8",
"redux-logger": "3.0.6",
"redux-persist": "6.0.0",
"redux-thunk": "2.3.0",
"typescript": "4.0.5"
},
"scripts": {
"start": "BROWSER=NONE REACT_APP_DISABLE_LIVE_RELOAD=false react-scripts start",
"build": "react-scripts build",
"build--withStats": "react-scripts build --stats",
"test": "react-scripts test",
"test:coverage": "npm run test -- --coverage",
"eject": "react-scripts eject",
"analyze": "source-map-explorer build/static/js/main.*"
},
"lint-staged": {
"src/**/*.{js,jsx,ts,tsx,json,css}": [
"prettier --single-quote --tab-width 4 --write"
]
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"proxy": "http://localhost:8080/",
"devDependencies": {
"@testing-library/dom": "7.26.3",
"@testing-library/jest-dom": "5.11.5",
"@testing-library/react": "11.1.0",
"@testing-library/user-event": "12.1.10",
"@tsconfig/recommended": "1.0.1",
"@types/history": "4.7.2",
"@types/jest": "26.0.15",
"@types/leaflet": "^1.5.19",
"@types/node": "14.14.5",
"@types/react": "16.9.53",
"@types/react-dom": "16.9.8",
"@types/react-redux": "7.1.9",
"@types/react-router-dom": "4.3.1",
"@types/redux-logger": "3.0.8",
"fetch-mock": "^9.10.7",
"fetch-mock-jest": "^1.3.0",
"husky": "4.3.0",
"jest-environment-jsdom-sixteen": "1.0.3",
"lint-staged": "10.5.0",
"msw": "0.21.3",
"prettier": "2.1.2",
"source-map-explorer": "2.5.0"
},
"browserslist": [
">0.2%",
"not dead",
"not op_mini all"
],
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!<rootDir>/node_modules/",
"!<rootDir>/integration-tests/",
"!<rootDir>/public/",
"!<rootDir>/build/"
],
"coverageThreshold": {
"global": {
"branches": 90,
"functions": 90,
"lines": 90,
"statements": 90
}
},
"coverageReporters": [
"text"
]
}
}有没有人知道是什么导致了这个错误？
回答 1
Stack Overflow用户
发布于 2021-09-30 17:59:49
在react-leaflet的3.2.0发行版中，该库的作者开始使用nullish coalescing operator，据我所知，当MarkerCluster插件将新的react-leaflet作为对等依赖项引入时，它会破坏包括create-react-app在内的各种捆绑器。
您链接的CodeSandbox使用的是3.0.2版本，其中一个修复方法是在package.json中使用react-leaflet版本的<3.2.0
"react-leaflet": ">=3.1.0 <3.2.0",
"@react-leaflet/core": ">=1.0.0 <1.1.0" // you may not need this one当然，这将阻止您在未来获得更新，因此您将需要定期检查Github issues，看看是否发布了修复程序。
https://stackoverflow.com/questions/69371264
复制相似问题
腾讯云开发者
