本文探讨了在react中处理并发异步操作更新同一状态变量时，由于闭包捕获旧状态值而导致数据覆盖的问题。通过一个google maps api集成示例，详细阐述了问题产生的原因，并提供了使用`usestate`的函数式更新机制作为解决方案，确保在异步环境中始终基于最新状态进行更新，从而避免数据丢失。
在React应用开发中，我们经常会遇到需要通过异步操作来更新组件状态的场景。然而，当多个异步操作几乎同时触发，并且它们都试图基于当前状态来计算新状态时，可能会遇到一个常见的问题：状态更新覆盖。本文将深入探讨这一问题，并提供一个健壮的解决方案。
理解异步状态更新的挑战
考虑一个React组件，它需要从外部API获取数据并更新一个状态变量。例如，我们可能需要同时获取两条路线的地理信息（polyline），并将它们存储在一个对象中，其中键代表路线编号。
假设我们有一个状态变量routes用于存储这些路线数据：
const [routes, setRoutes] = useState({1: null, 2: null});我们通过一个useEffect钩子来触发两个异步函数drawTaxiRoute，它们分别获取第一条和第二条路线：
useEffect(() => {
drawTaxiRoute(0, data.taxis, data.origin, data.map, setRoutes, routes);
drawTaxiRoute(1, data.taxis, data.origin, data.map, setRoutes, routes);
}, []);drawTaxiRoute函数内部调用Google Maps Directions API，并在回调中尝试更新routes状态：
function drawTaxiRoute(N = 0, taxis, destination, map, setRoutes, routes) {
// ... 其他逻辑，例如初始化 directionsService 和 taxiRouteDisplay
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);
}
}
);
}在上述代码中，预期的结果是routes状态最终会包含两条路线的数据，例如{1: {...}, 2: {...}}。然而，实际观察到的现象是，状态可能被错误地更新为{1: null, 2: {...}}，即第一条路线的数据丢失了。
问题根源：闭包与陈旧状态
这个问题的核心在于JavaScript的闭包特性以及React状态更新的异步性质。当useEffect中的两个drawTaxiRoute函数被调用时，它们都捕获了当时routes状态的初始值，即{1: null, 2: null}。
由于Directions API的请求是异步的，两个回调函数会在未来的某个时间点执行。假设：
- drawTaxiRoute(0, ...)的回调首先完成，它执行setRoutes({...routes, [1]: result1})。这里的routes是初始值{1: null, 2: null}，所以新状态会是{1: result1, 2: null}。
- 紧接着，drawTaxiRoute(1, ...)的回调完成，它执行setRoutes({...routes, [2]: result2})。关键在于，这里的routes仍然是drawTaxiRoute(1, ...)被调用时捕获的初始值{1: null, 2: null}，而不是经过第一次更新后的{1: result1, 2: null}。 因此，它会基于陈旧的状态创建一个新对象{1: null, 2: result2}，并将其设置为新的状态，从而覆盖了第一条路线的数据。
这就是所谓的“陈旧闭包”问题，在并发异步操作中尤为常见。
解决方案：使用函数式状态更新
React的useState钩子提供了一个强大的机制来解决这个问题：函数式状态更新。当setRoutes方法接收一个函数作为参数时，React会保证这个函数接收到的第一个参数是当前最新的状态值。
修改setRoutes的调用方式如下：
setRoutes((oldValue) => ({...oldValue, [N + 1]: result}));让我们看看修改后的drawTaxiRoute函数：
function drawTaxiRoute(N = 0, taxis, destination, map, setRoutes) { // 移除 routes 参数，因为它不再需要
// ... 其他逻辑，例如初始化 directionsService 和 taxiRouteDisplay
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);
}
}
);
}在useEffect中调用时，也无需再传递routes参数：
useEffect(() => {
drawTaxiRoute(0, data.taxis, data.origin, data.map, setRoutes); // 移除 routes 参数
drawTaxiRoute(1, data.taxis, data.origin, data.map, setRoutes); // 移除 routes 参数
}, []);为什么函数式更新有效？
当setRoutes接收一个函数作为参数时，React会：
- 将当前最新的routes状态值作为prevRoutes参数传递给这个函数。
- 执行这个函数，并使用其返回值作为新的状态。
这样，无论drawTaxiRoute的哪个回调函数先执行，它都会基于当时最新的routes状态来创建新的状态。
例如：
- drawTaxiRoute(0, ...)的回调完成，它调用setRoutes((prevRoutes) => ({...prevRoutes, [1]: result1}))。此时prevRoutes是{1: null, 2: null}，新状态变为{1: result1, 2: null}。
- 稍后，drawTaxiRoute(1, ...)的回调完成，它调用setRoutes((prevRoutes) => ({...prevRoutes, [2]: result2}))。此时，React会保证prevRoutes是最新的状态，即{1: result1, 2: null}。因此，新状态将正确地变为{1: result1, 2: result2}。
通过这种方式，我们确保了每次状态更新都基于最新的快照，从而避免了并发异步操作导致的状态覆盖问题。
总结与最佳实践
当你的新状态依赖于旧状态时（例如，你需要合并、修改或基于旧状态计算新值），尤其是在异步或并发操作中，始终优先使用useState的函数式更新形式。这不仅可以避免因闭包捕获陈旧状态值而导致的问题，还能使你的状态管理更加健壮和可预测。
记住，setStates(newValue)适用于新状态完全独立于旧状态的情况，而setStates((prevValue) => newComputedValue)则适用于新状态需要基于旧状态计算的情况。理解并恰当运用这两种更新方式，是编写高质量React应用的关键。
