React - 带有弹出窗口和选项卡的传单 MarkerCluster答案

【问题标题】：React - Leaflet MarkerCluster with Popup and TabsReact - 带有弹出窗口和选项卡的传单 MarkerCluster
【发布时间】：2020-03-11 09:14:25
【问题描述】：

我在使用带有弹出窗口和 React-Tabs 的 MarkerCluster 传单组件时遇到问题。问题是当我尝试在弹出窗口中重置选定的选项卡时，它会导致无限循环这似乎只是在使用 MarkerCluster 组时，否则它对于单个标记工作正常

我的代码如下

自定义标记组件

    const ExtendedMarker = props => {
      const initMarker = ref => {
        if (ref && props.isOpenMarker) {
          ref.leafletElement.openPopup();
        }
      };

      return <Marker ref={initMarker} {...props} />;
    };

    class CustomMarker extends React.Component {

      render() {
       const { icon, stop, isDisabledBtn, isOpenMarker, ...props } = this.props

       return (
        <ExtendedMarker
          icon={icon}
          position={[stop.latitude, stop.longitude]}
          isOpenMarker={isOpenMarker}
        >
          <Popup minWidth={260} closeButton={true} onOpen={() => this.setState({ tabIndex: 0 })}>
            <Tabs selectedIndex={this.state.tabIndex} onSelect={tabIndex => this.setState({ tabIndex })}>
              <TabList>
.
.
.
.

index.js

            <MarkerClusterGroup showCoverageOnHover={false} maxClusterRadius={50}>
              {currentStops.map(stop => (
                <CustomMarker
                  key={v4()}
                  icon={getCategoryIconMarker(stop.category)}
                  stop={stop}
                  {...this.props}
                />
              ))}
            </MarkerClusterGroup>

因此，当 MarkerClusterGroup 被删除时，此代码可以正常工作，否则会导致错误：超出最大更新深度

任何帮助将不胜感激。

谢谢

【问题讨论】：

标签： reactjs leaflet react-tabs

【解决方案1】：

我认为这是我在尝试以下列方式使用函数时遇到的错误模式：

{getCategoryIconMarker(stop.category)}

如果您改为使用箭头函数，可能会改善这种情况。至少在我的情况下，错误消失了。因此，只需将上面的函数替换为：

{() => getCategoryIconMarker(stop.category)}

希望有人会觉得它有用。

【讨论】：