无法在循环中从铯反应中移除实体

Question

我正在做一个铯反应项目，使用反应在铯地图上添加通用功能。 这是我的源代码。
创建错误
从上面的链接下载代码并运行应用程序并转到

http://localhost:3000/map

从下拉列表中选择

Add markers

并单击按钮

enable-drop-marker

然后单击地图上的几个地方

left clicks

然后按

clear All

按钮。

按下这个按钮，它应该从地图上删除所有名为

marker

.

的标记

问题
每当我使用这条线

map.entities.remove(entityArray[i]);

我的循环将运行

length-of-array / 2

。 次。我使用了 .map menthod 和简单的 for 循环，并打印了

i

的值和每个索引处的值。我被困在这里。甚至 chatGTP 也被这个错误搞糊涂了。请大家帮帮我...

问题在

map.jsx

组件中的这一部分

 useEffect(() => {
    // console.log("button Cliked  00 : ", BtnClearAll);
    // console.log("markerArrays : 11 ", markerArrays);
    if (BtnClearAll) {
      let map = mapRef.current;
      //let item = map.entity.indexAt(0);
      console.log("map. entity : ", map.entities);
      let entityArray = map.entities._entities._array;
      if (markerArrays.length > 0) {
        console.log("Entity length is : ", entityArray.length);

        entityArray.map((item) => {
          console.log(item.name);
          if (item.name === "marker") {
            map.entities.remove(item);
          }
        });

        // for (let i = 0; i < entityArray.length; i++) {
        //   console.log("ENtity name is " + i + " : ", entityArray[i].name);
        //   if (entityArray[i].name === "marker") {
        //     console.log("happy : ", i);
        //     map.entities.remove(entityArray[i]);
        //   }
        // }
      }
      // handleClearMarkerArray();
    }

    dispatch(clearMarkerBtnClicked(false));

    // let map = mapRef.current;
    // map.entities.removeAll();
  }, [BtnClearAll]); 

Answer 1

问题是由于在迭代时修改

entityArray

引起的。当您从数组中删除一个项目时，剩余项目的索引会发生变化，从而导致循环跳过一些元素。要解决此问题，您可以遍历数组的副本或以相反的顺序删除元素。

这是一个使用反向循环的解决方案：

if (markerArrays.length > 0) {
  console.log("Entity length is : ", entityArray.length);

  for (let i = entityArray.length - 1; i >= 0; i--) {
    console.log("ENtity name is " + i + " : ", entityArray[i].name);
    if (entityArray[i].name === "marker") {
      console.log("happy : ", i);
      map.entities.remove(entityArray[i]);
    }
  }
}

这将确保您在迭代时不会修改数组中剩余项的索引。