React——setState 新旧值复用问题

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

问题

js 复制代码
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 使用的是刚计算出的新值,而不是等待异步状态更新完成。
js 复制代码
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) {
    // 先计算新的 frameRangeValue
    const newRangeValue = { ...frameRangeValue, before: value };
    setFrameRangeValue(newRangeValue);
    updateFrameRange(frameNumber, newRangeValue); // 直接传递更新后的值
  }
};

const handleFrameRangeAfterChange = (e) => {
  const value = parseInt(e.target.value, 10);
  if (!isNaN(value) && value >= 0) {
    // 先计算新的 frameRangeValue
    const newRangeValue = { ...frameRangeValue, after: value };
    setFrameRangeValue(newRangeValue);
    updateFrameRange(frameNumber, newRangeValue); // 直接传递更新后的值
  }
};

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

相关推荐
Mike_jia5 分钟前
uuWAF:开源Web应用防火墙新标杆——从工业级防护到智能防御实战解析
前端
掘金安东尼14 分钟前
Chrome 17 岁了——我们的浏览器简史
前端·javascript·github
袁煦丞14 分钟前
群晖NAS FTP远程文件仓库全球访问:cpolar内网穿透实验室第524个成功挑战
前端·程序员·远程工作
前端小巷子19 分钟前
JS 打造动态表格
前端·javascript·面试
excel31 分钟前
从卷积到全连接:用示例理解 CNN 的分层
前端
UNbuff_032 分钟前
HTML 各种事件的使用说明书
前端·html
Mr. Cao code36 分钟前
探索OpenResty:高性能Web开发利器
linux·运维·服务器·前端·nginx·ubuntu·openresty
li35748 小时前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
Icoolkj9 小时前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js
excel9 小时前
CNN 分层详解:卷积、池化到全连接的作用与原理
前端