重新渲染后反应 Leaflet 弹出窗口打开

Question

即使在重新渲染后，我也想让我的标记弹出窗口打开。 我有一个显示用户 position 的标记，以便一直更新。 在该标记重新呈现后关闭其他标记的弹出窗口。

我的代码：

const StaticReferencePoints = (props) => {
  const { selectedCalibrationPoint, setSelectedCalibrationPoint, staticReferencePoints } = props;
  const addToast = useToastContext();
  const [snackbarOpen, setSnackbarOpen] = useState(true);
  const [latitude, longitude] = useGeolocationStoreHelper(['latitude', 'longitude']);
  const [map, setMap] = useState(null);

  const center = [latitude, longitude];
  const markerRef = useRef({});
  const [selectedMarker, setSelectedMarker] = useState(null);

  useEffect(() => {
    // open popup if it exists
    if (selectedMarker) {
      markerRef.current[selectedMarker]?.openPopup();
    }
  }, [selectedMarker, latitude, longitude]);

  useEffect(() => {
    if (map) {
      map.addEventListener('click', () => {
        setSelectedMarker(null);
      });
    }
  }, [map]);

  const handleSnackbarClose = (event, reason) => {
    if (reason === 'clickaway') {
      return;
    }
    setSnackbarOpen(false);
  };

  const handleDeletePoint = (point) => {
    if (confirm('Are you sure you want to delete this point?')) {
      Meteor.call(...) => {
        if (err) {
          console.log(err);
          addToast('Error deleting point', 'error');
        }
        if (res) {
          console.log(res);
          addToast('Point deleted', 'success');
        }
      });
    }
  };

  const SingleMarker = (point) => {
    const [anchorEl, setAnchorEl] = useState(null);
    const handleClick = (event) => {
      setAnchorEl(event.currentTarget);
    };
    const handleClose = () => {
      setAnchorEl(null);
    };
    return (
      <Marker
        key={'staticPoint-' + point.point?.name}
        position={point.point?.coordinates}
        ref={(el) => (markerRef.current[point.point.name] = el)}
        eventHandlers={{
          click: () => {
            setSelectedMarker(point.point.name);
          },
        }}
      >
        <Popup options={{ autoClose: false }}>
          <Grid container item justifyContent={'center'} xs={12}>
            <Grid item container direction={'row'} xs={12}>
              <Grid item xs={1} container justifyContent={'center'} alignItems={'center'}>
                {ACL.check) && (
                  <div>
                    <IconButton size="small" onClick={handleClick}>
                      <MoreVertIcon />
                    </IconButton>
                    <Menu anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
                      <MenuItem onClick={() => handleDeletePoint(point.point)}>
                        <ListItemIcon>
                          <DeleteIcon />
                        </ListItemIcon>
                        <ListItemText primary="Delete" />
                      </MenuItem>
                    </Menu>
                  </div>
                )}
              </Grid>
              <Grid item xs={10} container justifyContent={'center'} alignItems={'center'}>
                <Typography>{point.point?.name}</Typography>
              </Grid>
              <Grid item xs={1}></Grid>
            </Grid>
            <Button
              onClick={() => {
                setSelectedCalibrationPoint(point.point);
                setSelectedMarker(null);
              }}
            >
              Select For Calibration
            </Button>
          </Grid>
        </Popup>
      </Marker>
    );
  };

  const StaticPointMarkers = () => {
    return staticReferencePoints.map((point, i) => {
      return <SingleMarker key={'marker-' + i} point={point} />;
    });
  };

  const UserPositionMarker = () => <Marker position={[latitude, longitude]} icon={userPosition}></Marker>;

  return (
    <Grid item xs={12}>
      <Snackbar
        anchorOrigin={{
          vertical: 'top',
          horizontal: 'center',
        }}
        open={snackbarOpen}
        onClose={handleSnackbarClose}
        autoHideDuration={5000}
        message="Calibrate first by selecting a point from the map"
        action={
          <IconButton size="small" aria-label="close" color="inherit" onClick={handleSnackbarClose}>
            <Close fontSize="small" />
          </IconButton>
        }
      />
      <MapContainer
        center={center}
        zoom={18}
        maxZoom={28}
        scrollWheelZoom={false}
        style={{ height: '65vh' }}
        whenCreated={setMap}
      >
        <TileLayer
          url="https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}"
          maxZoom={28}
          subdomains={['mt0', 'mt1', 'mt2', 'mt3']}
        />
        {staticReferencePoints && <StaticPointMarkers />}
        {latitude && longitude && <UserPositionMarker />}
      </MapContainer>
      <Grid id={'info'} item container xs={12} justifyContent={'center'} marginTop={'1rem'}>
        <Typography>{`${latitude}, ${longitude}`}</Typography>
      </Grid>
      <Grid id={'info'} item container xs={12} justifyContent={'center'}>
        <InfoIcon onClick={() => setSnackbarOpen(true)} />
      </Grid>
    </Grid>
  );
};

export default StaticReferencePoints;

我现在已经在 state 上设置了当前打开的弹出窗口，并在 useEffect 上打开了弹出窗口，但这会产生闪烁。

强制弹出窗口保持打开状态的最佳方法是什么？

Answer 1

如果我理解你的问题，问题是当用户位置改变时，选定的标记弹出窗口闪烁？

一般来说，只要不再次创建标记，弹出窗口就应该能够保持打开状态。

我可以看到您将latitude和longitude作为 useEffect 中的依赖项，它们在 useEffect 中没有使用。 这将导致 useEffect 在每次更新latitude和longitude时也会触发。 我的第一个建议是将它们从依赖项数组中删除。

改变这个：

useEffect(() => {
    // open popup if it exists
    if (selectedMarker) {
      markerRef.current[selectedMarker]?.openPopup();
    }
  }, [selectedMarker, latitude, longitude]);

其次，要做的一件好事是确保弹出窗口尚未打开，这可以通过

对此：

useEffect(() => {
    // open popup if it exists
    if (selectedMarker && markerRef.current[selectedMarker]?isPopupOpen()) {
      markerRef.current[selectedMarker]?.openPopup();
    }
  }, [selectedMarker, markerRef]);

作为我使用 react-leaflet 的经验的旁注，不必要的重新渲染会导致一些视觉刺激，例如闪烁。 您应该努力减少重新渲染的数量。 这可以使用useMemo和useCallback挂钩来完成。 通常传递作为函数的道具，arrays 或 object 可能会导致重新渲染，即使它们是相同的。

据我所知，您的代码嵌套很深，看起来您在其他组件中定义了组件。 尝试打破你的代码来清除和清理组件，而不是将道具传递给它们，你仍然可以将它们全部放在同一个文件中。

使用 eslint 和 typescript 也可以帮助您找到代码问题。

Answer 2

比起@Disco 的回答。

我设法解决了这个问题：

  const StaticPointMarkers = (markers) => {
return useMemo(() => markers.map((point, i) => <SingleMarker key={'marker-' + i} point={point} />), [markers])};