如何从 withHandlers 调用另一个函数？

Posted 2023-02-21

【中文标题】如何从 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();
       // .....
      ,
    ,
    // .....
  ),
  // .....
)