在React应用中，当多个异步函数尝试并发更新同一个useState状态变量时，可能会因为闭包捕获了旧状态值而导致数据覆盖或部分更新丢失。本文将深入探讨此问题产生的原因，并提供一种健壮的解决方案：利用useState的函数式更新模式，确保每次状态更新都基于最新的状态快照，从而有效避免并发场景下的数据不一致性。
理解并发异步状态更新的挑战
在React开发中，我们经常需要处理异步操作，例如从API获取数据并更新组件状态。当这些异步操作是并发执行时，如果不采取正确的策略，很容易遇到状态更新不一致的问题。
考虑一个场景：我们需要从Google Maps Directions API获取两条路线的折线图数据，并将它们存储在一个名为routes的React状态变量中。routes是一个对象，初始值为{1: null, 2: null}。
const [routes, setRoutes] = useState({1: null, 2: null});我们有两个异步调用来获取这两条路线，并通过一个辅助函数drawTaxiRoute进行封装。这个函数接收一个索引N（0或1）来标识要更新的路线，以及setRoutes和当前的routes状态作为参数。
useEffect(() => {
// 假设data.taxis, data.origin, data.map等已定义
drawTaxiRoute(0, data.taxis, data.origin, data.map, setRoutes, routes);
drawTaxiRoute(1, data.taxis, data.origin, data.map, setRoutes, routes);
}, []); // 依赖数组根据实际情况可能需要添加drawTaxiRoute函数内部通过directionsService.route发起异步请求，并在回调函数中尝试更新状态：
function drawTaxiRoute(N = 0, taxis, destination, map, setRoutes, routes) {
// ... 其他逻辑 ...
directionsService.route(
{
origin: taxis[N].getPosition(),
destination: destination,
travelMode: google.maps.TravelMode.DRIVING,
},
function (result, status) {
if (status === 'OK') {
// taxiRouteDisplay.setMap(map); // 假设此行已处理
setRoutes({...routes, [N+1]: result}); // 问题所在！
console.log(result, N+1);
}
}
);
}问题分析：为什么会发生数据覆盖？
上述代码的问题在于setRoutes({...routes, [N+1]: result})这一行。当drawTaxiRoute(0, ...)和drawTaxiRoute(1, ...)被几乎同时调用时，它们各自的异步回调函数最终都会执行。然而，由于JavaScript的闭包特性，这两个回调函数内部引用的routes变量，都将是它们各自被调用时routes的那个快照。
具体来说：
- 当useEffect执行时，routes的当前值是{1: null, 2: null}。
- drawTaxiRoute(0, ..., setRoutes, {1: null, 2: null})被调用。
- drawTaxiRoute(1, ..., setRoutes, {1: null, 2: null})被调用。
- 假设drawTaxiRoute(1)的异步请求先完成，其回调函数执行：setRoutes({...{1: null, 2: null}, [2]: resultForRoute2})。此时，routes状态被更新为{1: null, 2: resultForRoute2}。
- 随后，drawTaxiRoute(0)的异步请求完成，其回调函数执行：setRoutes({...{1: null, 2: null}, [1]: resultForRoute1})。注意，这里的routes仍然是当初传入的{1: null, 2: null}，而不是在步骤4中更新后的状态。因此，这次更新将导致routes变为{1: resultForRoute1, 2: null}。
结果是，resultForRoute2的数据被覆盖丢失，最终状态只保留了后完成的N=0（即[1]）的更新，而[2]对应的字段又变回了null。这就是为什么在控制台中看到{1: null, 2: {...}}（或者反过来）的原因。
解决方案：利用useState的函数式更新
为了解决这个问题，我们需要确保每次状态更新都基于最新的状态值，而不是某个旧的快照。React的useState Hook提供了一种函数式更新（Functional Update）的形式，正是为了应对此类场景。
setRoutes方法除了可以直接接收新状态值外，还可以接收一个函数。这个函数会接收当前的最新状态作为参数，并返回新的状态值。
setRoutes((oldValue) => {
// oldValue 保证是当前最新的状态值
return {...oldValue, [N+1]: result};
});将drawTaxiRoute函数中的状态更新逻辑修改为函数式更新：
function drawTaxiRoute(N = 0, taxis, destination, map, setRoutes) { // 移除routes参数
// ... 其他逻辑 ...
directionsService.route(
{
origin: taxis[N].getPosition(),
destination: destination,
travelMode: google.maps.TravelMode.DRIVING,
},
function (result, status) {
if (status === 'OK') {
// taxiRouteDisplay.setMap(map); // 假设此行已处理
setRoutes((prevRoutes) => ({ // 使用函数式更新
...prevRoutes,
[N+1]: result
}));
console.log(result, N+1);
}
}
);
}关键改动点：
- 移除routes参数：drawTaxiRoute函数不再需要接收当前的routes状态作为参数，因为它将通过setRoutes的函数式更新来获取最新状态。
- 函数式更新：setRoutes((prevRoutes) => ({...prevRoutes, [N+1]: result}))。这里的prevRoutes参数由React提供，它保证是routes状态的最新值。这样，即使多个异步回调并发执行，它们对状态的更新也会基于一个正确的、最新的基础。
通过这种方式，当drawTaxiRoute(1)的回调先完成时，prevRoutes会是{1: null, 2: null}，更新后变为{1: null, 2: resultForRoute2}。随后，当drawTaxiRoute(0)的回调完成时，其prevRoutes将是{1: null, 2: resultForRoute2}，更新后变为{1: resultForRoute1, 2: resultForRoute2}，从而确保了两条路线的数据都正确地被合并到状态中，避免了数据覆盖。
最佳实践与注意事项
- 何时使用函数式更新：当你的新状态依赖于旧状态时（例如，递增计数器、向数组添加元素、合并对象等），尤其是在异步操作或批量更新的场景下，总是优先考虑使用函数式更新。
- 状态的不可变性：在更新对象或数组类型的状态时，务必保持不可变性。这意味着你应该创建新的对象或数组，而不是直接修改旧的状态对象。{...prevRoutes, [N+1]: result}就是创建了一个新对象。
- useEffect依赖数组：虽然本例中useEffect的依赖数组为空[]，表示只在组件挂载时执行一次，但在实际项目中，如果你的drawTaxiRoute函数或其内部逻辑依赖于props或其他state，请务必将它们添加到useEffect的依赖数组中，以避免闭包捕获旧值的问题。在本例中，由于setRoutes是稳定的（React保证），且drawTaxiRoute不再直接依赖routes参数，所以routes不需要出现在useEffect的依赖数组中。
总结
在React中处理并发异步操作并更新useState状态时，理解闭包和状态快照的重要性至关重要。通过采用useState的函数式更新模式（即setSetter((prevState) => newState)），我们可以确保每次状态更新都基于最新的状态值，从而有效地防止数据覆盖和不一致性问题，使我们的React组件更加健壮和可预测。这是一个在复杂应用中管理共享状态的关键技巧。
