关键词：
【中文标题】如何从 withHandlers 调用另一个函数？【英文标题】：How to call another function from withHandlers? 【发布时间】：2019-10-02 08:19:06 【问题描述】：我正在尝试使用react-google-maps 包在我的应用程序中实现谷歌地图。在地图中，我显示了多个Marker 并使用了MarkerCluster。
到目前为止，我没有任何问题，并且可以从文档中轻松实现。但是现在我想在点击标记时显示InfoWindow。
所以，我想制作一个函数来获取点击事件并传递markerId，这样我就可以调用API并获取该标记的相关数据，然后以表格的方式将其放入infowindow中。
现在，我面临的问题是：
1) 从onMarkerClick 调用onToggleOpen
2) 如何在onMarkerClick的infowindow对象中设置数据
我面临的所有这些问题都是因为我使用的是 HOC，即recompose。
我习惯于 Class 实现，但尝试了函数式实现，试图使其完全无状态。
参考链接：https://tomchentw.github.io/react-google-maps/#infowindow
以下是我的代码：
import React, Component from "react";
import Header from "./Header.js";
import Sidebar from "./Sidebar.js";
import axios from "axios";
import imgmapcluster from "./pins/iconmapcluster.png";
import user from "./pins/user1copy.png";
import compose, withProps, withHandlers from "recompose";
import
withScriptjs,
withGoogleMap,
GoogleMap,
Marker,
InfoWindow
from "react-google-maps";
// const fetch = require("isomorphic-fetch");
const
MarkerClusterer
= require("react-google-maps/lib/components/addons/MarkerClusterer");
const MapWithAMarkerClusterer = compose(
withProps(
googleMapURL:
"https://maps.googleapis.com/maps/api/js?key=AIzaSyCHi5ryWgN1FcZI-Hmqw3AdxJQmpopYJGk&v=3.exp&libraries=geometry,drawing,places",
loadingElement: <div style= height: `100%` />,
containerElement: <div style= height: `90vh` />,
mapElement: <div style= height: `100%` />
),
withHandlers(
onMarkerClustererClick: () => markerClusterer =>
// console.log("markerCluster", markerClusterer);
const clickedMarkers = markerClusterer.getMarkers();
// console.log(`Current clicked markers length: $clickedMarkers.length`);
// console.log(clickedMarkers);
,
onMarkerClick: (props) => markerss =>
//calling api and setting info window object
props.isOpen=!props.isOpen //showing error
,
onToggleOpen: ( isOpen ) => () => (
isOpen: !isOpen
)
),
withScriptjs,
withGoogleMap
)(props => (
<GoogleMap
defaultZoom=5
defaultCenter= lat: 22.845625996700075, lng: 78.9629
>
<MarkerClusterer
onClick=props.onMarkerClustererClick
averageCenter
styles=[
textColor: 'white',
url: imgmapcluster,
height: 68,
lineHeight: 3,
width: 70
]
enableRetinaIcons
gridSize=50
>
props.markers.map((marker, index) => (
<Marker
key=index
icon=user
onClick=props.onMarkerClick.bind(props,marker)
position= lat: marker.latitude, lng: marker.longitude
/>
))
props.isOpen && (
<InfoWindow
// position= lat: props.infowindow.lat, lng: props.infowindow.lng
onCloseClick=props.onToggleOpen
>
<h4>hello</h4>
</InfoWindow>
)
</MarkerClusterer>
</GoogleMap>
));
class DemoApp extends React.PureComponent
componentWillMount()
this.setState( markers: [],isOpen:false,infowindow: );
componentDidMount()
axios(
url: "http://staging.clarolabs.in:6067/farmerinfo/farmercoordinates",
method: "POST",
data:
temp: "temp"
,
headers:
"Content-Type": "application/json"
).then(res =>
this.setState( markers: res.data.data.list );
);
render()
return <MapWithAMarkerClusterer markers=this.state.markers isOpen=this.state.isOpen InfoWindowobject=this.state.InfoWindowobject/>;
【问题讨论】：
【参考方案1】：为了从另一个调用 withHandler，您需要将它们分隔在两个处理程序中。您也可以使用withStateHandler 并存储 infoWindow 状态
withStateHandlers(
infoWindow: null ,
setInfoWindow: () => (value) => ( infoWindow: value)
),
withHandlers(
onToggleOpen: ( isOpen ) => () => (
isOpen: !isOpen
)
),
withHandlers(
onMarkerClustererClick: () => markerClusterer =>
// console.log("markerCluster", markerClusterer);
const clickedMarkers = markerClusterer.getMarkers();
// console.log(`Current clicked markers length: $clickedMarkers.length`);
// console.log(clickedMarkers);
,
onMarkerClick: (props) => markerss =>
const setInfoWindow, onToggleOpen = props;
//calling api and setting info window object
setInfoWindow(lat: res.lat, lng: res.lng) // set infoWindow object here
onToggleOpen() // Toggle open state
),
【讨论】：
它成功了。谢谢，但发生的事情是，每次我点击标记时，整个MapWithAMarkerClusterer 都会重新渲染，使其变慢。你能帮我怎么不能让他们每次点击都重新渲染吗？【参考方案2】：
您可能应该使用withStateHandlers 来处理状态。此外，您可以多次写入withHandlers，因此withHandlers 后面的处理程序将可以访问其他处理程序。
compose(
// .....
withStateHandlers(
isOpen: false ,
toggleOpen: (state) => () => ( isOpen: !state.isOpen ),
// or
setOpen: () => (value) => ( isOpen: value ),
),
withHandlers(
// .....
onMarkerClick: (props) => markerss =>
// .....
props.toggleOpen();
// .....
,
,
// .....
),
// .....
)【讨论】：
如何从另一个函数进行异步函数调用？
】如何从另一个函数进行异步函数调用？【英文标题】：HowdoImakeanasynchronousfunctioncallfromanotherfunction?【发布时间】：2020-04-0207:01:08【问题描述】：目标是在执行程序其余部分的过程中并行创建一个docx文档。“第一个”函数应该只... 查看详情
如何从Angular中的另一个函数调用一个函数？
】如何从Angular中的另一个函数调用一个函数？【英文标题】：HowtocallafunctionfromanotherfunctioninAngular?【发布时间】：2019-02-1722:47:28【问题描述】：从输入类型（来自Home.html）中选择文件时调用onFileSelected(event)，一切正常，除非我尝... 查看详情
如何从另一个文件调用函数？
】如何从另一个文件调用函数？【英文标题】：howtocallafunctionfromanotherfile?【发布时间】：2011-10-0905:32:30【问题描述】：对不起，基本问题我确定，但我似乎无法弄清楚。假设我有这个程序，文件名为pythonFunction.py：deffunction():retu... 查看详情
如何从 Rcpp 中的另一个函数调用一个函数？
】如何从Rcpp中的另一个函数调用一个函数？【英文标题】：HowtocallafunctionfromanotherfunctioninRcpp?【发布时间】：2021-06-2520:51:02【问题描述】：我在C++中定义了两个函数，我使用Rcpp包在R中调用它们。我将f1和f2函数都放在一个cppFuncti... 查看详情
如何从当前 Lambda 函数调用另一个 Lambda 函数？
】如何从当前Lambda函数调用另一个Lambda函数？【英文标题】：HowcanIcallanotherLambdafunctionfromcurrentLambdafunction?【发布时间】：2018-10-2614:35:40【问题描述】：我有2个Lambda函数。首先从数据库中获取数据并将其放入DynamoDB。然后从DynamoDB... 查看详情
如何从另一个类调用函数
】如何从另一个类调用函数【英文标题】：Howtocallafunctionfromanotherclass【发布时间】：2018-06-0918:25:17【问题描述】：在我的rootviewcontroller中，导航菜单下方有三个选项卡，每个选项卡代表一个产品列表，在导航菜单中，我有一个... 查看详情
如何快速从另一个控制器调用函数
】如何快速从另一个控制器调用函数【英文标题】：Howtocallafunctionfromanothercontrollerinswift【发布时间】：2019-10-1814:10:36【问题描述】：我在DetailViewController上设置了ShowCharts按钮，它触发getChartData函数并在图表的显示视图中显示值... 查看详情
如何从AngularJS中的另一个控制器调用函数？ [复制]
】如何从AngularJS中的另一个控制器调用函数？[复制]【英文标题】：HowtocallafunctionfromanothercontrollerinAngularJS?[duplicate]【发布时间】：2015-06-1014:50:37【问题描述】：我需要在AngularJS的另一个控制器中调用一个函数。我该怎么做？代... 查看详情
如何使用线程从另一个类调用不同的函数
】如何使用线程从另一个类调用不同的函数【英文标题】：Howtousethreadingtocalldifferentfunctionsfromanotherclass【发布时间】：2015-01-1605:53:39【问题描述】：我有一个服务器类，它具有三种方法启动/停止/重定向。请在下面找到代码。publ... 查看详情
如何从另一个构造函数调用 C++ 类构造函数 [重复]
】如何从另一个构造函数调用C++类构造函数[重复]【英文标题】：HowtocallaC++classConstructorfromanotherConstructor[duplicate]【发布时间】：2017-01-0501:23:45【问题描述】：我正在尝试在C++中创建一个需要多个对象构造函数的对象。说Foo()和Foo... 查看详情
如何从另一个页面调用flutter中的函数
】如何从另一个页面调用flutter中的函数【英文标题】：howtocallafunctioninflutterfromanotherpage【发布时间】：2020-10-1116:04:41【问题描述】：我是Flutter的新手，我正在做一个小型poc项目。我想要的只是使用按钮单击从我的第一页调用第... 查看详情
如何在bash脚本中通过函数调用将参数/参数从一个函数传递到另一个函数[重复]
】如何在bash脚本中通过函数调用将参数/参数从一个函数传递到另一个函数[重复]【英文标题】：Howtopassargs/parameterswithafunctioncallfromonefunctiontoanotherinabashscript[duplicate]【发布时间】：2019-02-2302:50:55【问题描述】：我试图弄清楚如何... 查看详情
如何从另一个类调用指向成员的函数？ [复制]
】如何从另一个类调用指向成员的函数？[复制]【英文标题】：HowdoIcallpointer-to-memberfunctionsfromanotherclass?[duplicate]【发布时间】：2018-03-0922:21:08【问题描述】：我有两个班级，Button和Game。Game类包含Button*类型的成员，而Button类包含... 查看详情
如何从另一个汇编文件中调用汇编函数？
】如何从另一个汇编文件中调用汇编函数？【英文标题】：Howcanicallaassemblyfunctionfromanotherassemblyfile?【发布时间】：2016-05-2000:52:46【问题描述】：实际上，我正在将NASM用于我的学术项目。我们的想法是为数学运算构建一个静态库... 查看详情
如何从另一个类中的一个类调用 setter 函数？
】如何从另一个类中的一个类调用setter函数？【英文标题】：Howtocallasetterfunctionfromoneclassinanotherclass?【发布时间】：2020-10-2517:02:21【问题描述】：我正在尝试从ClassA中的classB调用setter函数，但我无法执行此操作，我不知道为什么... 查看详情
如何从Angular中的另一个组件调用组件的ngOnit函数
】如何从Angular中的另一个组件调用组件的ngOnit函数【英文标题】：HowtocallngOnitfunctionofacomponentfromanothercomponentinAngular【发布时间】：2021-08-1915:37:16【问题描述】：我在这个组件中有一个名为“CreateBugsViewComponent”的组件我想使用... 查看详情
如何从一个函数检索对象/变量的值到另一个函数并通过 main 调用这两个函数？
】如何从一个函数检索对象/变量的值到另一个函数并通过main调用这两个函数？【英文标题】：Howtoretrievevalueofobjects/variablesfromonefunctiontoanotherandcallingthetwofunctionsbymain?【发布时间】：2020-08-0714:28:33【问题描述】：我试图从kindle()... 查看详情
如何从单独文件中的另一个视图调用主干视图函数
】如何从单独文件中的另一个视图调用主干视图函数【英文标题】：Howtocallabackboneviewfunctionfromanotherviewinseparatefiles【发布时间】：2014-11-1108:59:01【问题描述】：我在两个单独的文件中定义了两个主干视图，即：LandingView.jsdefine([\'... 查看详情