Question

在我问这个问题之前，我很自然地搜索了一下，发现了这个great post：

在解释一些序言后，我将在稍后展示我的实现。

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

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 }]
   });
  },

Answer 1

<块引用>

本质上我的问题是 useState 中的更新程序函数不是同步更新，它获得的数据落后。

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

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

即 -

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

来自React docs：

<块引用>

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

反应 useRef 钩子：useRef 值不被 useState 函数使用

1 个答案: