我正在使用react-leaflet和react-leaflet-markercluster将React中的传单映射转换为钩子。除了使用 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"
]
这在现有项目中从来没有出现过。这是现有项目的 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"
]
}
}
有人知道导致错误的原因是什么吗？
在
3.2.0react-leafletcreate-react-appreact-leaflet版本，一个修复方法是您在 package.json 中使用
3.0.2react-leaflet<3.2.0
当然，这会阻止您将来获取更新，因此您需要定期检查Github issues
"react-leaflet": ">=3.1.0 <3.2.0",
"@react-leaflet/core": ">=1.0.0 <1.1.0" // you may not need this one
。
我的@react-leaflet/core文件有 2 个指向不同版本的条目：
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()
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 install leaflet-draw