我正在使用React - leaft和React - leaft -markercluster将React中的leaft -map转换为钩子。除了使用了MarkerCluster组件之外，一切都很顺利。应用程序给出了这个错误:Error: No context provided: useLeafletContext() can only be used in a descendant of <MapContainer>
我试着做和这个codesandbox完全一样的事情，包括使用相同版本的包:https://codesandbox.io/s/9binx?file=/src/styles.scss: 168 - 206
既在现有项目中，也在一个全新的项目中(create-react-app)。它仍然在现有项目中给出相同的错误。新项目也是如此，但是当从package.json中删除它时修复了:
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
这在现有的项目中从未出现过。这是包裹。现有项目的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"
]
}
}
有人知道是什么导致了这个错误吗?
在react-leaflet的3.2.0版本中，库的作者开始使用null合并操作符，据我所知，当MarkerCluster插件将新的react-leaflet作为peer依赖项拉入时，它会破坏包括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问题，看看是否已经发布修复。
我刚刚得到相同的错误信息。在我的例子中，在我的项目中有多个版本的@react-leaflet/core。
我的yarn.lock文件有两个条目指向不同的版本:
"@react-leaflet/core@^1.0.2":
version "1.1.0"
...
"@react-leaflet/core@^1.1.1":
version "1.1.1"
...
我通过将它们组合成一个条目来解决这个问题:
"@react-leaflet/core@^1.0.2", "@react-leaflet/core@^1.1.1":
version "1.1.1"
...
最后一个适合我，我只是回到以前的反应传单版本，useLeafletContext()也可以工作。
你可以用这个代替react.js包装器。
import { FC, useRef, useEffect } from 'react'
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import 'leaflet.markercluster/dist/MarkerCluster.css'
import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
require('leaflet.markercluster/dist/leaflet.markercluster-src')
const Map: FC = () => {
useEffect(() => {
const map = L.map('map').setView([51.505, -0.09], 13)
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
}).addTo(map)
const icon = L.icon({
iconUrl: 'https://cdn-icons-png.flaticon.com/512/2776/2776067.png',
iconSize: [30, 30]
})
const markers = L.markerClusterGroup()
const marker = L.marker(new L.LatLng(38.423733, 27.142826), { icon })
marker.bindPopup("<b>Hello world!</b><br>I am a popup.")
const marker2 = L.marker(new L.LatLng(38.453899, 27.211700), { icon })
markers.addLayer(marker)
markers.addLayer(marker2)
map.addLayer(markers)
return () => {
map.off()
map.remove()
}
}, [])
return <div id='map'></div>
}
export default Map
`
尝试npm i @react-leaflet/core
try NPM install leaf -draw