为什么我的 Chakra UI Slider 会触发 onChangeStart 和 onChangeEnd？

如何解决为什么我的 Chakra UI Slider 会触发 onChangeStart 和 onChangeEnd？

我正在尝试创建一个滑块，当用户停止移动它时调用一个函数。滑块的代码如下所示。

<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)!!!
        })
    }