reactjs - DirectionsRenderer 和 DirectionsService @react-google-maps/api 没有被渲染，也没有抛出错误

Question

我正在尝试使用 @react-google-maps/api 的方向服务。

我正在使用 reactjs，文档链接是https://react-google-maps-api-docs.netlify.app/#directionsservice.

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

我究竟做错了什么。我也没有。

Answer 1

地图被渲染了很多次。根据文档，他们在渲染期间设置状态。渲染应该始终保持纯净。在渲染和其他一些反应生命周期钩子中做副作用的事情是一种非常糟糕的做法。

我认为他们必须努力改进文档。如果我们遵循文档，它将给出指导，但您会收到超出谷歌地图配额的错误。

 const [response, setResponse] = React.useState(null);
   const directionsCallback = res => {
       console.log(' => res', res);
    if (res !== null) {
      if (res.status === 'OK') {
        setResponse(res);
      } else {
        console.log('res: ', res);
      }
    }
  };

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

更新：

这解决了多重渲染

let count = React.useRef(0);

const directionsCallback = React.useCallback(res => {
    console.log(count.current);
    if (res !== null) {
      if (res.status === 'OK' && count.current < 2) {
        count.current += 1;
        setResponse(res);
      } else {
        count.current = 0;
        console.log('res: ', res);
      }
    }
  }, []);