我正在 <!DOCTYPE html>
<html>
<head>
<title>Angelkarte</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
</head>
<body>
<div id="map" style="width: 700px; height: 640px"></div>
<script>
var jsonDataObject = [
{
"geometry": {
"location": {
"lat": 50.93756,
"lng": 6.947799799999999
},
"viewport": {
"northeast": {
"lat": 50.93890322989272,
"lng": 6.949169529892721
},
"southwest": {
"lat": 50.93620357010728,
"lng": 6.946469870107277
}
}
},
"icon": "https://maps.gstatic.com/mapfiles/place_api/icons/shopping-71.png",
"id": "62cb1e6d0806ad07128377d901ee32310253a30b",
"name": "REWE",
"opening_hours": {
"open_now": true
},
"photos": [{
"height": 3096,
"html_attributions": [
"\u003ca href=\"https://maps.google.com/maps/contrib/101585085101168022315\"\u003eMomen Mawad\u003c/a\u003e"
],
"photo_reference": "CmRaAAAAXm4APOhsx_uZaCqKYJaPIV3j4N8LacOOyJRbo4Ngic4a8d_wfvN2hpGdEq99Bb4a-GJ1zNYytXZJb31oZtb76UcCXlCqJz-_T8OUJIGU0QPrwtoxouUUNbpogqSCnCddEhDqABsG5Mqmf0PSSo-b_T2uGhTU6tkDpTmygG7CRvzKLaSm2W1K_Q",
"width": 4128
}],
"place_id": "ChIJfT5IYqklv0cRa8hjie38gBs",
"plus_code": {
"compound_code": "WWQX+24 Köln",
"global_code": "9F28WWQX+24"
},
"rating": 4,
"reference": "ChIJfT5IYqklv0cRa8hjie38gBs",
"scope": "GOOGLE",
"types": [
"supermarket",
"grocery_or_supermarket",
"food",
"point_of_interest",
"store",
"establishment"
],
"user_ratings_total": 718,
"vicinity": "Neumarkt 8-10, Köln"
},
{
"geometry": {
"location": {
"lat": 50.9896636,
"lng": 6.9450721
},
"viewport": {
"northeast": {
"lat": 50.99083827989272,
"lng": 6.945784879892721
},
"southwest": {
"lat": 50.98813862010728,
"lng": 6.943085220107277
}
}
},
"icon": "https://maps.gstatic.com/mapfiles/place_api/icons/shopping-71.png",
"id": "15bde73489d3e661f76c6c8b057b857d15c33f5d",
"name": "Lidl",
"opening_hours": {
"open_now": true
},
"photos": [{
"height": 4160,
"html_attributions": [
"\u003ca href=\"https://maps.google.com/maps/contrib/109844980228758601627\"\u003eJakub Zeman\u003c/a\u003e"
],
"photo_reference": "CmRaAAAAxWykfcdTATYDgX-RKiu2bJMZ_i1TDEKYRRZtLY7d7ra2LoPSq-lHbqYgj2Hm8rT2MtniHkb5LbjPsynSg_03hYxVvrU7y5HC0shGbjO-AkmChpTk4G0u0fm7Ryso_BUcEhC4p08zvEuFmcU5fOZvbCoKGhS1zKXZF6SF27Ly4u6ZWlmsd2VJ3Q",
"width": 3120
}],
"place_id": "ChIJI0M7-Jkvv0cRZafVWxoOywc",
"plus_code": {
"compound_code": "XWQW+V2 Köln",
"global_code": "9F28XWQW+V2"
},
"rating": 4.1,
"reference": "ChIJI0M7-Jkvv0cRZafVWxoOywc",
"scope": "GOOGLE",
"types": [
"supermarket",
"grocery_or_supermarket",
"food",
"point_of_interest",
"store",
"establishment"
],
"user_ratings_total": 450,
"vicinity": "Neusser Str. 774/776, Köln"
},
{
"geometry": {
"location": {
"lat": 50.9626901,
"lng": 7.0051027
},
"viewport": {
"northeast": {
"lat": 50.96417282989272,
"lng": 7.006365279892721
},
"southwest": {
"lat": 50.96147317010728,
"lng": 7.003665620107277
}
}
},
"icon": "https://maps.gstatic.com/mapfiles/place_api/icons/shopping-71.png",
"id": "abb022726ecd83f2f41a4921b9969fdb92f78a48",
"name": "Lidl",
"opening_hours": {
"open_now": true
},
"photos": [{
"height": 1920,
"html_attributions": [
"\u003ca href=\"https://maps.google.com/maps/contrib/101798318233683502049\"\u003eSergei Baikin\u003c/a\u003e"
],
"photo_reference": "CmRaAAAAJ4SqucpuL7ecaLXlipj7twdqC_KwTTYAF48n-2aMGzLTJGT1nphb_OM9h_A05nRob5R34sHNKNqtKBSoHeVTI5UlDf6cbHRswDv1UFldESl814keTyTXfWTlzlryyGxQEhApWglsPwfp3thXkYgHzAp2GhT9cZSOrbfKytiDWdGjM8y-hNhE1Q",
"width": 1080
}],
"place_id": "ChIJA5HPDgcmv0cR-QJ3JHPmld4",
"plus_code": {
"compound_code": "X274+32 Köln",
"global_code": "9F29X274+32"
},
"rating": 3.6,
"reference": "ChIJA5HPDgcmv0cR-QJ3JHPmld4",
"scope": "GOOGLE",
"types": [
"supermarket",
"grocery_or_supermarket",
"food",
"point_of_interest",
"store",
"establishment"
],
"user_ratings_total": 318,
"vicinity": "Wr. Pl. 1, Köln"
},
{
"geometry": {
"location": {
"lat": 50.97775619999999,
"lng": 7.0010123
},
"viewport": {
"northeast": {
"lat": 50.97912242989272,
"lng": 7.002976729892721
},
"southwest": {
"lat": 50.97642277010728,
"lng": 7.000277070107277
}
}
},
"icon": "https://maps.gstatic.com/mapfiles/place_api/icons/shopping-71.png",
"id": "078117a10aefd0116715a6079cdb036f5ba41c57",
"name": "Netto Filiale",
"opening_hours": {
"open_now": true
},
"photos": [{
"height": 1280,
"html_attributions": [
"\u003ca href=\"https://maps.google.com/maps/contrib/111351800509443750507\"\u003eA Google User\u003c/a\u003e"
],
"photo_reference": "CmRaAAAAoij8qIZHDfyMMua-UT_Xr4qIbNaEaeJg6ocxZMmLnbtvMBgSHwlnX_z0XXeugXfZRAlGer39I1chZiL10-iR_BIw86ciuNseeI7dzgubxljtcWHE8c-_4Nwk4hctxZFSEhAe5EKQCBGRRJbzGikqunuXGhT0Qox0e2htUVa_VhVgGvOrJWwr2w",
"width": 960
}],
"place_id": "ChIJXQ6kzFMvv0cRHnkGLzukbvw",
"plus_code": {
"compound_code": "X2H2+4C Köln",
"global_code": "9F29X2H2+4C"
},
"rating": 3.9,
"reference": "ChIJXQ6kzFMvv0cRHnkGLzukbvw",
"scope": "GOOGLE",
"types": [
"supermarket",
"grocery_or_supermarket",
"food",
"point_of_interest",
"store",
"establishment"
],
"user_ratings_total": 360,
"vicinity": "Düsseldorfer Str. 177, Köln"
}
];
var map = L.map('map').setView([50.922082, 6.944733], 10);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var markerIcons = {
"REWE": L.icon({
iconUrl: 'https://unpkg.com/leaflet@1.6.0/dist/images/marker-icon-2x.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Netto Filiale": L.icon({
iconUrl: 'https://unpkg.com/leaflet@1.6.0/dist/images/marker-icon-2x.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
"Lidl": L.icon({
iconUrl: 'https://unpkg.com/leaflet@1.6.0/dist/images/marker-icon-2x.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
}),
};
for (let i = 0; i < jsonDataObject.length; i++) {
var lat = parseFloat(jsonDataObject[i].geometry.location.lat);
var lng = parseFloat(jsonDataObject[i].geometry.location.lng);
console.log(jsonDataObject[i].name)
var marker = L.marker([lat, lng], {
icon: markerIcons[jsonDataObject[i].name]
});
marker.bindPopup(jsonDataObject[i].name, {
autoClose: false
});
map.addLayer(marker);
marker.myJsonData = jsonDataObject[i];
};
</script>
</body>
</html>中创建具有以下功能的减速器：
Redux喜欢：
export const createSingleObjectReducer = (updateActionType, initialState = {}, debug = false) => {
const reducer = (state = initialState, action) => {
if (!action) {
return state
}
switch (action.type) {
case updateActionType: {
if (action.updates === undefined) {
console.error(`Invalid ${updateActionType} action: action.updates is undefined: `, action)
return state
}
const newState = { ...state, ...action.updates }
if (debug) {
console.log('singleObjectReducer: applying action: ', action, 'State changing from ', state, ' to ', newState)
}
return newState
}
default:
return state
}
}
return reducer
}
然后将操作分派到另一个文件中，如下所示：
export const RECEIVE_VARIANT_TAGTYPES_DATA = 'RECEIVE_VARIANT_TAGTYPES_DATA'
const rootReducer = combineReducers(Object.assign({
...
...
variantTagTypesData: createSingleObjectReducer(RECEIVE_VARIANT_TAGTYPES_DATA, {
variantTagTypes: {},
variantFunctionalTagTypes: {},
}),
...
}))
由于未知原因未分派动作。有什么可能的原因？
答案 0 :(得分：0)
问题是我在RECEIVE_VARIANT_TAGTYPES_DATA之前调度了多个操作，而发生的事情是：调度了先前的操作，然后进行了更新，调用了选择器，一些组件开始渲染，这导致崩溃，因为{{1 }}尚未调度，相关数据已更新。如果我们可以在几个RECEIVE_VARIANT_TAGTYPES_DATA-语句周围加一些包装，以保证应该根据所有这些状态更改第一个状态，然后再发生其他事情，那就很好了。