解决React异步函数并发更新状态变量覆盖问题：使用函数式更新

本文深入探讨了react应用中，当多个异步操作尝试同时更新同一个状态变量时，可能由于闭包捕获了过时的状态值而导致数据覆盖的问题。我们将通过一个具体的google maps api集成案例，详细分析问题成因，并提出使用react `usestate`钩子提供的函数式更新机制作为解决方案，确保在并发更新场景下状态的正确性和一致性。

在React开发中，管理组件状态是核心任务之一。然而，当涉及到异步操作，特别是多个并发异步操作尝试更新同一个状态变量时，开发者可能会遇到状态值被意外覆盖或不一致的问题。这通常是由于JavaScript闭包捕获了组件渲染时的“旧”状态值，而非最新的状态。

问题场景分析：异步并发更新与状态覆盖

考虑一个常见的场景：我们希望同时从Google Maps Directions API获取两条不同的路线数据，并将它们存储在一个React状态变量中。例如，一个名为 routes 的状态变量被初始化为 {1: null, 2: null}，用于存储两条路线的Polyline数据。

初始的代码实现可能如下所示：

import React, { useState, useEffect } from 'react';

function MyComponent({ data }) {
    const [routes, setRoutes] = useState({ 1: null, 2: null });

    useEffect(() => {
        // 假设 drawTaxiRoute 是一个异步函数，内部调用 Google Maps API
        // 并且会调用 setRoutes 更新状态
        drawTaxiRoute(0, data.taxis, data.origin, data.map, setRoutes, routes);
        drawTaxiRoute(1, data.taxis, data.origin, data.map, setRoutes, routes);
    }, [data]); // 依赖 data 确保只在 data 变化时运行

    // ... 组件渲染逻辑
}

function drawTaxiRoute(N = 0, taxis, destination, map, setRoutes, currentRoutes) {
    // ... Google Maps DirectionsService 初始化等
    const directionsService = new google.maps.DirectionsService();
    const taxiRouteDisplay = new google.maps.DirectionsRenderer();

    directionsService.route(
        {
            origin: taxis[N].getPosition(),
            destination: destination,
            travelMode: google.maps.TravelMode.DRIVING,
        },
        function (result, status) {
            if (status === 'OK') {
                taxiRouteDisplay.setMap(map);
                // 问题所在：直接使用 currentRoutes
                setRoutes({ ...currentRoutes, [N + 1]: result });
                console.log(`更新路线 ${N + 1}:`, result);
            }
        }
    );
}

登录后复制

在这个例子中，useEffect 钩子会立即调用两次 drawTaxiRoute 函数，分别用于获取第一条和第二条路线。这两个函数内部的 directionsService.route 调用都是异步的，它们会在不同的时间点完成并触发回调函数。

问题根源：闭包捕获的旧状态

当 useEffect 首次执行时，routes 的值是 {1: null, 2: null}。

1. 第一次 drawTaxiRoute(0, ...) 调用时，其内部的异步回调函数捕获了当时的 routes 值（即 {1: null, 2: null}）。
2. 第二次 drawTaxiRoute(1, ...) 调用时，其内部的异步回调函数也捕获了当时的 routes 值（仍然是 {1: null, 2: null}），因为在第一个异步操作完成并更新状态之前，组件尚未重新渲染。

假设第二个异步回调先完成。它会执行 setRoutes({ ...currentRoutes, [2]: resultForRoute2 })，其中 currentRoutes 仍然是 {1: null, 2: null}。此时，routes 状态变为 {1: null, 2: resultForRoute2}。

随后，第一个异步回调完成。它也会执行 setRoutes({ ...currentRoutes, [1]: resultForRoute1 })，但这里的 currentRoutes 依然是它当初捕获的 {1: null, 2: null}。因此，它会将状态更新为 {1: resultForRoute1, 2: null}，覆盖了第二个异步操作已经设置好的值。最终，我们看到的状态可能是 {1: null, 2: resultForRoute2} 或 {1: resultForRoute1, 2: null}，而不是期望的 {1: resultForRoute1, 2: resultForRoute2}。

标签： react javascript java go 回调函数 工具 google 组件渲染 作用域 为什么