问题描述
我正在尝试创建一个滑块,当用户停止移动它时调用一个函数。滑块的代码如下所示。
<Slider
label="label1"
name="name1"
defaultValue={1}
min={0}
max={10}
step={1}
onChangeEnd={e => calculateEvent("",e,2)}
/>
但是,当我将滑块从其原始位置移动,然后将其移到另一个位置时,它会调用计算事件函数两次。一次使用原始滑块值,一次使用当前滑块值。我调用的函数向服务器发送 HTTP 请求,该服务器根据此滑块值执行计算,然后使用从服务器返回的值。问题是,当这两个请求都发送时,使用的值来自滑块的原始位置,而不是当前滑块值。 (下面是计算事件的代码和控制台日志的图片)所以在这种情况下,使用的值来自slider = 2而不是slider = 5。为什么会发生这种情况?
const calculateEvent = (event : string,slider : number,change : number) => {
if (change === 0) {
setI(event);
} else if (change === 1) {
setM(event);
} else if (change === 2) {
setS(slider);
}
console.log("Calculate event called with slider value: ",S);
getProjection(I,M,S).then((m) => { //Called once with S = 2,then S = 5)
console.log(m);
data.yAxis = m; //This is set to getProjection(I,2)!!!
})
}
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)