您的位置:首页 > 娱乐 > 明星 > 小程序推广文案_河南seo网站多少钱_seo宣传_广告推广营销网站

小程序推广文案_河南seo网站多少钱_seo宣传_广告推广营销网站

2024/10/5 20:28:30 来源:https://blog.csdn.net/weixin_45705239/article/details/142330850  浏览:    关键词:小程序推广文案_河南seo网站多少钱_seo宣传_广告推广营销网站
小程序推广文案_河南seo网站多少钱_seo宣传_广告推广营销网站

异步状态更新获取新值问题

  • 问题
  • 解决

问题

const updateFrameRange = (frameNumber, rangeValue) => {//const startFrame = Math.max(frameNumber - rangeValue.before, 1);const endFrame = Math.min(frameNumber + rangeValue.after, maxFrame);
console.log(frameNumber,rangeValue)const newFrameRange = Object.values(Data?.frames || {}).slice(startFrame - 1, endFrame).map((frame) => frame.timestamp);setFrameRange(newFrameRange);};const handleFrameRangeBeforeChange = (e) => {const value = parseInt(e.target.value, 10);if (!isNaN(value) && value >= 0) {setFrameRangeValue((prev) => ({ ...prev, before: value }));updateFrameRange(frameNumber, frameRangeValue);}};const handleFrameRangeAfterChange = (e) => {const value = parseInt(e.target.value, 10);if (!isNaN(value) && value >= 0) {setFrameRangeValue((prev) => ({ ...prev, after: value }));updateFrameRange(frameNumber, frameRangeValue);}};

这一块代码updateFrameRange每次获取到的第二个参数都是上一个状态的旧值,我想立马获取到frameRangeValue更新后的新值.

解决

setFrameRangeValue 是异步的,所以当你在状态更新后立即调用 updateFrameRange 时,frameRangeValue 仍然是旧的值。为了解决这个问题,你可以先计算出新的值,然后将其传递给 updateFrameRange,而不是依赖尚未更新的状态值。

你可以这样修改代码,确保 updateFrameRange 使用的是最新的值:

1.	在 handleFrameRangeBeforeChange 和 handleFrameRangeAfterChange 中,先计算新的 frameRangeValue,然后再分别传递给 setFrameRangeValue 和 updateFrameRange。
2.	这样做可以确保 updateFrameRange 使用的是刚计算出的新值,而不是等待异步状态更新完成。
const updateFrameRange = (frameNumber, rangeValue) => {const startFrame = Math.max(frameNumber - rangeValue.before, 1);const endFrame = Math.min(frameNumber + rangeValue.after, maxFrame);const newFrameRange = Object.values(Data?.frames || {}).slice(startFrame - 1, endFrame).map((frame) => frame.timestamp);setFrameRange(newFrameRange);
};const handleFrameRangeBeforeChange = (e) => {const value = parseInt(e.target.value, 10);if (!isNaN(value) && value >= 0) {// 先计算新的 frameRangeValueconst newRangeValue = { ...frameRangeValue, before: value };setFrameRangeValue(newRangeValue);updateFrameRange(frameNumber, newRangeValue); // 直接传递更新后的值}
};const handleFrameRangeAfterChange = (e) => {const value = parseInt(e.target.value, 10);if (!isNaN(value) && value >= 0) {// 先计算新的 frameRangeValueconst newRangeValue = { ...frameRangeValue, after: value };setFrameRangeValue(newRangeValue);updateFrameRange(frameNumber, newRangeValue); // 直接传递更新后的值}
};

所以应该尽量避免依赖异步状态更新完成。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com