Mapbox 超级集群在尝试缩放集群时抛出错误

Question

我使用 supercluster 通过 React-map-gl 在 mabox 上显示集群。如果我单击一个群集，它不会按预期放大，但会引发上述错误。有谁知道为什么或者有同样的问题解决了吗？

未捕获类型错误：无法读取未定义的属性（读取“长度”）

       if (isCluster) {
            return (
              <Marker
                key={`cluster-${cluster.id}`}
                longitude={longitude}
                latitude={latitude}
              >
                <div
                  className="cluster-marker"
                  style={{
                    width: `${10 + (point_count / articels.length) * 20}px`,
                    height: `${
                      10 + (point_count / articels.length) * 20
                    }px`,
                  }}
                  onClick={() => {
                    //cluster.id = 16
                    const zoom = Math.min(
                      supercluster.getClusterExpansionZoom(cluster.id),
                      20
                    );
                    mapRef.current.flyTo({
                      center: [longitude, latitude],
                      zoom,
                      speed: 5,
                    });
                  }}
                >
                  {point_count}
                </div>
              </Marker>
            );
          }

Answer 1

代码看起来正确，所以这可能是一个简单的拼写错误，带有

articels.length

（文章？）。这可以解释为什么它无法读取 .length，因为文章似乎不存在（=未定义）。

此外，mapRef 在开始时未定义或为 null，因此向潜在未定义的对象和键添加问号也可能有助于防止错误：

mapRef?.current?.flyTo()