本文探讨了在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应用的关键。
以上就是React异步并发更新State：避免覆盖的函数式方案的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1540189.html
微信扫一扫 
支付宝扫一扫 
