渲染问题似乎与库本身有关。我可以建议的一种替代方法是使用/加载 Google Maps API 脚本，而不是依赖 3rd 方库。这样，您只需按照Google 提供的官方文档进行操作即可。

通过加载脚本，我们现在可以遵循他们的Directions API 文档：

这是一个示例应用程序供您参考：https : //stackblitz.com/edit/react-directions-64165413

App.js

    import React, { Component } from 'react';
    import { render } from 'react-dom';
    import Map from './components/map';
    import "./style.css";
    
    class App extends Component {
     
      render() {
        return (
           <Map 
            id="myMap"
            options={{
              center: { lat: 31.582045, lng: 74.329376 },
              zoom: 8
            }}
          />
        );
      }
    }
    
    export default App;

map.js

    import React, { Component } from "react";
    import { render } from "react-dom";
    
    class Map extends Component {
      constructor(props) {
        super(props);
        this.state = {
          map: "",
          origin: "",
          destination: ""
        };
        this.handleInputChange = this.handleInputChange.bind(this); 
        this.onSubmit = this.onSubmit.bind(this);
      }
    
      onScriptLoad() {
        this.state.map = new window.google.maps.Map(
          document.getElementById(this.props.id),
          this.props.options
        );
      }
    
      componentDidMount() {
        if (!window.google) {
          var s = document.createElement("script");
          s.type = "text/javascript";
          s.src = `https://maps.google.com/maps/api/js?key=YOUR_API_KEY`;
          var x = document.getElementsByTagName("script")[0];
          x.parentNode.insertBefore(s, x);
          // Below is important.
          //We cannot access google.maps until it's finished loading
          s.addEventListener("load", e => {
            this.onScriptLoad();
          });
        } else {
          this.onScriptLoad();
        }
      }
    
      onSubmit(event) {    
        this.calculateAndDisplayRoute();
        event.preventDefault();
      }
    
      calculateAndDisplayRoute() {
        var directionsService = new google.maps.DirectionsService();
        var directionsRenderer = new google.maps.DirectionsRenderer();
        directionsRenderer.setMap(this.state.map);
        directionsService.route(
          {
            origin: { query: this.state.origin },
            destination: { query: this.state.destination },
            travelMode: "DRIVING"
          },
          function(response, status) {
            if (status === "OK") {
              directionsRenderer.setDirections(response);
            } else {
              window.alert("Directions request failed due to " + status);
            }
          }
        );
        
      }
    
      handleInputChange(event) {
        const target = event.target;
        const value = target.type === "checkbox" ? target.checked : target.value;
        const name = target.name;
    
        this.setState({
          [name]: value
        });
      }
      addMarker(latLng) {
        var marker = new window.google.maps.Marker({
          position: { lat: -33.8569, lng: 151.2152 },
          map: this.state.map,
          title: "Hello Sydney!"
        });
        var marker = new google.maps.Marker({
          position: latLng,
          map: this.state.map
        });
      }
    
      render() {
        return (
          <div>
            <input
              id="origin"
              name="origin"
              value={this.state.origin}
              placeholder="Origin"
              onChange={this.handleInputChange}
            />
            <input
              id="destination"
              name="destination"
              value={this.state.destination}
              placeholder="Destination"
              onChange={this.handleInputChange}
            />
            <button id="submit" onClick={this.onSubmit}>
              Search
            </button>
            <div className="map" id={this.props.id} />
          </div>
        );
      }
    }
    
    export default Map;

渲染应该始终保持纯净。在渲染期间做副作用的事情是一种非常糟糕的做法。

您在 directionCallback 中不断调用 setstate。您只需要添加另一个条件 count.current < 2。

const [origin, setOrigin] = React.useState('chennai');
  const [destination, setDestination] = React.useState('bangalore');
  const [response, setResponse] = React.useState(null);
let count = React.useRef(0);
  const directionsCallback = res => {
    if (res !== null && && count.current < 2) {
      if (res.status === 'OK') {
        count.current += 1;
        setResponse(res);
      } else {
        count.current = 0;
        console.log('res: ', res);
      }
    }
  };

  <DirectionsService
            options={{
              destination: destination,
              origin: origin,
              travelMode: 'DRIVING'
            }}
            callback={directionsCallback}
          />

但是来自回调的响应没有在 DirectionsRenderer 中呈现。

我也没有收到任何错误消息。

{response !== null && (
            <DirectionsRenderer
              // required
              options={{
                directions: response
              }}
            />
          )}

回调响应是

嘿，我在这里有点晚了，但是您正在立即调用正在重新渲染和搞砸的回调函数。只需更改以下内容。

callback={direactionsCallback}

有了这个：

callback={(e) => directionsCallback(e)}

有点晚了，但任何面临同样问题的人都可以参考this。DirectionService 将一次又一次地重新渲染，您必须停止它，直到从 DirectionService 回调函数为 DirectionRender 位置（lat 和 lng）获得响应结果。您可以在开始时设置一个空变量，并应用DirectionService 运行的条件，直到该变量为空。在 DirectionService 的回调中，将此变量设置为从此回调收到的响应，然后您就可以了。我在 DirectionRender 类中面临的另一个问题是，一旦我更新状态，它就会一次又一次地重新渲染。在选项中，将preserveViewport 设置为true 以保留视图。

您可以从这里参考 DirectionService 问题：https : //react-google-maps-api-docs.netlify.app/#directionsrenderer