如果你想渲染后，你可以选择添加关键字，你的组件如下。

import React, { useContext, useState, useEffect, useRef } from "react";

import {
  MapContainer,
  TileLayer,
  Popup,
  Polyline,
  Marker
} from "react-leaflet";
import MovingMarker from "./MovingMarker";
import ActivityList from "./ActivityList";

let setPositionInterval;

function ReplayMap(props) {
  const [mapRef, setMapRef] = useState(1); // added this line for trigger counter
  const [nextPosition, setNextPosition] = useState();
  const currentIdxRef = useRef(0);
  const duration = 0.2 * 1000; // 1 second is 1000ms

  useEffect(() => {
    if (props.playStatus) {
      setPositionInterval = setInterval(() => {
        currentIdxRef.current < props.activityData.length &&
          setNextPosition(props.activityData[currentIdxRef.current]);
        setMapRef(mapRef++); // added this line if position change your counter increse and force re-render your component.
        currentIdxRef.current = currentIdxRef.current + 1;
      }, duration);

      return () => {
        clearInterval(setPositionInterval);
      };
    }
  }, [props.playStatus]);

  //console.log("Props = ", props.activityData);
  return (
    <div>
      <MapContainer
        center={[-8.798064, 115.222211]}
        zoom={15}
        scrollWheelZoom={false}
        style={{ width: "400px", height: "400px" }}
        key={mapRef.toString()}
      >
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url={"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"}
        />
        {props.playStatus && (
          <MovingMarker
            nextPosition={nextPosition ? nextPosition : props.activityData[0]}
            duration={duration}
            playStatus={props.playStatus}
          />
        )}
      </MapContainer>
    </div>
  );
}

export default ReplayMap;