为什么当我从这里发卡时会出现一些错误 sdk 集成到我的 reactJs 项目中？-解网

问：

我在这里集成了 sdk 在我的 reactJs 项目中。我按照文档操作，显示卡，但在检查器中总是发生一些错误：这是检查器中输出的 screeshot，这是我的代码：


  useEffect(() => {
    if (address) {
    
      setLoading(true);
      fetchData(address)
        .then((data) => {
          const { responseLength, addressData, addressDetails, geometryCoordinates } = data;
          // Utilisez les données récupérées dans votre composant
          setNumberOfDetails(responseLength);
          setAddressData(addressData);
          context.setAddressDpe(addressData)

          setAddressDetails(addressDetails);
          context.setAddress(geometryCoordinates);
          onChange(address);
          setLoading(false);
        })
        .catch((error) => {
          console.error("Error fetching data:", error);
        });
    

      api.findGeometryCoordinates(address.properties.label).then((result) => {
        console.log('resuu', result);
        context.setAddress(result);
        onChange(address);
        setLoading(false);
      });
    }
 

  }, [address]);
  const mapContainer = useRef(null);

  const [longitudeValue, setLongitudeValue]= useState(2.209667)
  const [latitudeValue, setLatitudeValue] = useState(46.232193 )

  const [displayMarker, setDisplayMarker] = useState(false); // Add a state for displaying the marker

  useEffect(() => {
    context.setProgress(0);

  
    if (context?.logement?.adresse?.geometry?.coordinates) {
      setLongitudeValue(context?.logement?.adresse?.geometry?.coordinates[0]);
      setLatitudeValue(context?.logement?.adresse?.geometry?.coordinates[1]);
      console.log("Longitude:", longitudeValue);
      console.log("Latitude:", latitudeValue);
      setDisplayMarker(true); // Set displayMarker to true when address data is available
    } else {
      setDisplayMarker(false); // Set displayMarker to false when address data is not available
    }
  
    const platform = new H.service.Platform({
      apikey: 'A_fwvYa_lFCGh2muBJ1EzgHYYU339exOHLFmkiPuQws',
    });
  
    const defaultLayers = platform.createDefaultLayers();
  
    const map = new H.Map(mapContainer.current, defaultLayers.vector.normal.map, {
      center: { lat: latitudeValue, lng: longitudeValue },
      zoom: 13,
    });
  
    if (displayMarker) {
      const customMarker = new H.map.Icon(customMarkerIcon, {
        size: { w: 50, h: 50 }, // Set the width and height to 32 pixels
      });      const marker = new H.map.Marker({ lat: latitudeValue, lng: longitudeValue }, {icon: customMarker});
      map.addObject(marker);
    }
  
    return () => {
      map.dispose();
    };
  }, [context.logement, longitudeValue, latitudeValue, displayMarker]);

  
 
  let percentage;
  if (selectedScore !== null) {
    percentage = (selectedScore / 100) * 100;
  }

  return (
    <>
  <div className="absolute inset-0">
  <div className="w-full h-screen" ref={mapContainer}></div>
</div>

这是索引 .html 文件：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="initial-scale=1.0, width=device-width" />

  <script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"
  type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"
  type="text/javascript" charset="utf-8"></script>  <title>App Title</title>
</head>

<body>
  <div id="root"></div>


  <script type="module" src="/src/main.jsx"></script>


  
</body>

</html>

我想避免这些错误，因为应用程序变慢了。如果您能帮助我解决这个问题，我将不胜感激。

JavaScript ReactJS 错误处理本地化 here-API

答： 暂无答案

上一个：React Npm 启动失败

下一个：NEXTJS 13 应用程序路由器 - 客户端组件中调用的服务器操作失败，未呈现 error.tsx

为什么当我从这里发卡时会出现一些错误 sdk 集成到我的 reactJs 项目中？

Why some errors occured when I card from here sdk is integrated in my reactJs project?

评论