如何在react中从google地图方向中删除之前的路线？

import React, { useState } from 'react';

const MapComponent = () => {
  const [directions, setDirections] = useState(null);

  // 其他代码...

  return (
    <div>
      {/* 地图组件 */}
    </div>
  );
};

export default MapComponent;

import React, { useState } from 'react';

const MapComponent = () => {
  const [directions, setDirections] = useState(null);

  const handleGetDirections = () => {
    const directionsService = new window.google.maps.DirectionsService();

    const request = {
      origin: '起点',
      destination: '终点',
      travelMode: 'DRIVING',
    };

    directionsService.route(request, (result, status) => {
      if (status === 'OK') {
        setDirections(result);
      }
    });
  };

  // 其他代码...

  return (
    <div>
      <button onClick={handleGetDirections}>获取路线</button>
      {/* 地图组件 */}
    </div>
  );
};

export default MapComponent;

import React, { useState, useEffect, useRef } from 'react';

const MapComponent = () => {
  const [directions, setDirections] = useState(null);
  const mapRef = useRef(null);
  const directionsRendererRef = useRef(null);

  useEffect(() => {
    if (directions && mapRef.current) {
      const map = new window.google.maps.Map(mapRef.current, {
        center: { lat: 0, lng: 0 },
        zoom: 8,
      });

      directionsRendererRef.current = new window.google.maps.DirectionsRenderer();
      directionsRendererRef.current.setMap(map);
      directionsRendererRef.current.setDirections(directions);
    }
  }, [directions]);

  const handleDeleteDirections = () => {
    if (directionsRendererRef.current) {
      directionsRendererRef.current.setMap(null);
      setDirections(null);
    }
  };

  return (
    <div>
      <button onClick={handleDeleteDirections}>删除路线</button>
      <div ref={mapRef} style={{ width: '100%', height: '400px' }} />
    </div>
  );
};

export default MapComponent;