1

在我问这个问题之前，我自然地做了一个搜索，发现了这个很棒的帖子：

在我解释了一些序言之后，我将在一秒钟内展示我的实现。

本质上我的问题是 useState 中的更新函数没有同步更新，它在它获得的数据中落后了。

向 useState 函数传递一个包含 id、lat 和 lang 的对象。

currentCoords: [{id: 1, lat: 40.74003514370453, lng: -73.76452126968704}]
markers: [{id: 0, lat: 40.74168820148129, lng: -73.76539693565009},…]
0: {id: 0, lat: 40.74168820148129, lng: -73.76539693565009}
1: {id: 1, lat: 40.74003514370453, lng: -73.76452126968704}

currentCoords，应该镜像标记数组。如您所见，它是“设置”第二个。

所以我都知道，因为 setState 和 useState 是异步的，你不能依赖正在更新的状态。

现在这是我尝试过的：

 useEffect(() => {
    if (userMarkers.length === 1) {
      userMarkersRef.current = userMarkers[0]; // {id: 0, lat: 40.74168820148129, lng: -73.76539693565009}
      setUserCoords(userMarkersRef.current);

      setIsRoutingVisibileFalse();
    }
    if (userMarkers.length === 2) {
      userMarkersRef.current = userMarkers[1]; // {id: 1, lat: 40.74003514370453, lng: -73.76452126968704}
      setUserCoords(userMarkersRef.current);
    }
  }, [JSON.stringify(userMarkers)]);

我在useEffect依赖项中包含了一个数组，该数组已被字符串化以在它（useMarkers）更改时启动（不用担心数组永远不会超过两个项目！）

我想通过保存一个显式引用，然后将它传递给可以工作的更新程序，但它没有:(

这是 setState 函数，将其保存到本地存储：

  setUserCoords: coords => {
   setUser({
     ...user,
     currentCoords: [{ ...user.currentCoords[coords.id], ...coords }]
   });
  },
4

1 回答 1

1

本质上我的问题是 useState 中的更新函数没有同步更新，它在它获得的数据中落后了。

看起来user通过内部闭包引用的任何内容setUser都是陈旧的。

由于您的下一个状态取决于您之前的状态，您可以使用其他形式setState来获取上一个状态的最新快照。

IE -

setUserCoords: coords => {
   setUser((prevState) => {
     return {
       ...prevState.user,
       currentCoords: [{ ...prevState.user.currentCoords[coords.id], ...coords }]
     }
   });
  },

来自React 文档：

updater 函数接收到的 state 和 props 都保证是最新的。更新器的输出与状态浅合并。

于 2020-12-22T19:46:00.507 回答