Reactjs 如何从WithHandler调用另一个函数？

我正在尝试使用

react google maps

软件包在我的应用程序中实现google maps。在地图中，我显示了多个

标记

，并使用了

标记聚类

到目前为止，我没有任何问题，可以从文档中轻松实现。但是现在我想显示

InfoWindow

，如果单击了标记

因此，我想创建一个函数来获取click事件并传递

markerId

，这样我就可以调用API并获取该标记的相关数据，然后以表格的方式将其放入infowindow中

现在，我面临的问题是：

1） 从

onMarkerClick

2） 如何在

onMarkerClick

我所面临的所有这些问题都是因为我使用了HOC，即

重新组合

。 我习惯于类实现，但尝试了函数实现，试图使其完全无状态

参考链接：

以下是我的代码：

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}/>;
  }
}

import React，{Component}来自“React”；
从“/Header.js”导入标题；
从“/Sidebar.js”导入侧边栏；
从“axios”导入axios；
从“/pins/iconmapcluster.png”导入imgmapcluster；
从“/pins/user1copy.png”导入用户；
从“重新组合”导入{compose，withProps，withHandlers}；
进口{
用ScriptJS，
用谷歌地图，
谷歌地图，
标记，
信息窗
}从“谷歌地图反应”；
//常量fetch=require（“同构fetch”）；
常数{
标记聚类器
}=require（“react google maps/lib/components/addons/MarkerClusterer”）；
常量mapWithAmarkClusterer=compose(
用道具({
谷歌地图网址：
"https://maps.googleapis.com/maps/api/js?key=AIzaSyCHi5ryWgN1FcZI-Hmqw3AdxJQmpopYJGk&v=3.exp&libraries=几何图形、图形、位置“，
加载元素：，
集装箱运输：，
mapElement：
}),
带处理器(
{
在MarkerCluster上单击：（）=>MarkerCluster=>{
//log（“markerCluster”，markerClusterer）；
常量clickedMarkers=markerClusterer.getMarkers（）；
//log（`Current clicked markers length:${clicked markers.length}`）；
//console.log（单击标记器）；
},
onMarkerClick：（道具）=>markers=>{
//调用api并设置信息窗口对象
props.isOpen=！props.isOpen//显示错误
},
onToggleOpen:（{isOpen}）=>（）=>({
伊索本：！伊索本
})
}
),
用ScriptJS，
用谷歌地图
)（道具=>(
{props.markers.map（（marker，index）=>(
))}
{props.isOpen&&(
你好
)}
));
类DemoApp扩展了React.PureComponent{
组件willmount（）{
this.setState（{markers:[]，isOpen:false，infowindow:{}）；
}
componentDidMount（）{
axios({
url:“http://staging.clarolabs.in:6067/farmerinfo/farmercoordinates",
方法：“张贴”，
数据：{
临时工：“临时工”
},
标题：{
“内容类型”：“应用程序/json”
}
})。然后（res=>{
this.setState（{markers:res.data.data.list}）；
});
}
render（）{
返回；
}
}

您可能应该使用

和stateholders

来处理状态。此外，您还可以多次使用处理程序编写

withHandlers

，因此下面

withHandlers

中的处理程序将可以访问其他处理程序

compose(
// .....
与国家处理者(
{isOpen:false}，
{
toggleOpen：（state）=>（）=>（{isOpen:！state.isOpen}），
//或
setOpen:（）=>（值）=>（{isOpen:value}），
}
),
带处理器(
// .....
{
onMarkerClick：（道具）=>markers=>{
// .....
props.toggleOpen（）；
// .....
},
},
// .....
),
// .....
)

为了从另一个调用withHandler，需要在两个处理程序中分离它们。您还可以使用

和stateHandler

存储信息窗口状态

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


      }
    }
  ),

---

成功了。谢谢，但每次我点击marker时，整个

MapWithAMarkerClusterer

都会被重新渲染，速度会变慢。你能帮我解释一下为什么每次点击都不能让它们重新渲染吗。