0 
function MyMap({ floorsByBuilding }: MyMapProps) {
  const [coords, setCoords] = useState<any[]>([]);

  const created = (e) => {
    const coordsList = e.layer.editing.latlngs[0][0];
    console.log("coordsList:", coordsList);
    setCoords(coordsList);
    console.log("Coords:",coords);
  };

  return (
    <div className="mapview">
      <div className="myMap">
        <Map center={[0, 0]} zoom={1}>
          <FeatureGroup>
            <EditControl
              position="topright"
              draw={{
                rectangle: false,
                circle: false,
                circlemarker: false,
                polyline: false,
              }}
              onCreated={created}
            />
          </FeatureGroup>
        </Map>
      </div>
    </div>
  );
}

e.layer.editing.latlngs[0][0] 看起来像，

[
   {
      "lat":32.29840589562344,
      "lng":80.85780182804785
   },
   {
      "lat":17.421213563227735,
      "lng":78.36653079164644
   },
   {
      "lat":23.02755815843566,
      "lng":107.33497479055386
   },
   {
      "lat":41.49329414356384,
      "lng":104.47883340910323
   },
   {
      "lat":39.47390998063457,
      "lng":82.8312041405605
   }
]

EditControl 是 react-leaflet-draw 组件，有助于在图像或地图中进行注释，我们从中获取坐标（上述数据），即 e.layer.editing.latlngs[0][0]。获得坐标后，我试图将这些坐标存储到一个状态（即 setCoords）中，以便我可以在其他地方使用这些坐标。

这里的问题是，在第一次获得 coordsList 之后， setCoords 实际上并没有设置这些坐标（第二个 console.log 返回空数组，即使第一个 console.log 确实返回了所需的输出）。但是当我第二次尝试时，即获得了一个新的 coordList 值，setCoords 设置了以前的 coordsList 的数据（第一个 console.log 正确返回 coordsList，但第二个 console.log 返回 coordsList 的先前数据）。

截图更清晰，

当我第一次得到 coordsList 时，

在此处输入图像描述

第二次， 在此处输入图像描述

4

3 回答 3

2

保持console.log在created()函数之外。setCoords()是一个异步函数，因此状态不会立即更新以在console.log您给出的中显示它。因此，在重新渲染时将其保留在外面以查看它。

  const created = (e) => {
    const coordsList = e.layer.editing.latlngs[0][0];
    console.log("coordsList:", coordsList);
    setCoords(coordsList);
  };

   console.log("Coords:",coords);
于 2021-09-04T13:11:47.160 回答
1

因为 state 只有在组件重新渲染时才有新值。因此，您应该console.log在useEffect组件重新渲染时检查新值。

const created = (e) => {
  const coordsList = e.layer.editing.latlngs[0][0];
  console.log("coordsList:", coordsList);
  setCoords(coordsList);
};

useEffect(() => {
  console.log("Coords:", coords);
}, [coords]);
于 2021-09-04T13:14:26.233 回答
1

这是因为Reactjs 的更新批处理机制

当在 onChange、onClick 等事件处理程序中更新状态时，React 会将所有内容批处理setState为一个：

const created = (e) => {
  const coordsList = e.layer.editing.latlngs[0][0];
  console.log("coordsList:", coordsList);
  setCoords(coordsList);
  console.log("Coords:", coords);
};

将您的日志放在return函数之前以查看最新值：

function MyMap({ floorsByBuilding }: MyMapProps) {
  const [coords, setCoords] = useState<any[]>([]);

  const created = (e) => {
    const coordsList = e.layer.editing.latlngs[0][0];
    setCoords(coordsList);
  };

  console.log("Coords:",coords);
  return (
  ...
  )
}

但是这种行为将在 Reactjs 18 中改变，如此处所述

于 2021-09-04T13:18:07.643 回答