javascript - 为什么我的 React Slider 调用我的函数两次？

Question

我正在我的页面上渲染一个 Chakra UI 滑块和折线图。当我停止移动滑块时，它应该调用一个更新状态的函数，然后调用另一个更新常量值的函数。然后将该常数用作我的折线图的 yAxis。（xAxis 已经定义。）但是，当我停止移动滑块时，calculateEvent 函数似乎被调用了两次。为什么会这样？

<Input 
     label="Initial Savings amount" 
     name="Initial Savings" 
     onInput={e => changeInitialSavings(e.currentTarget.value)} 
     placeholder="5000"
/>
<Input 
     label="Monthly Deposit" 
     name="Monthly Deposit" 
     onInput={e => changeMonthlyDepo(e.currentTarget.value)} 
     placeholder="100"
/>
<Slider
    label="Interest Rate"
    name="Interest Rate"
    defaultValue={2}
    min={1}
    max={15}
    step={1}
    onChangeEnd={e => changeInterestRate(e)} 
/>
<LineChart
    title="Savings Over time"
    xAxisData={xAxis}
    yAxisData={yAxis}
    xLabel="Years"
    yLabel="Amount"
/>

const changeInitialSavings = (event : string) => {
    setInitialSavings(event);
    calculateEvent();
}

const changeMonthlyDepo = (event : string) => {
    setMonthlyDepo(event);
    calculateEvent();
}

const changeInterestRate = (event : number) => {
    setInterestRate(event);
    calculateEvent();
}

const calculateEvent = () => {
    console.log("Calculate event called with slider value: ", interest);
    yAxis = [interest, 2, 3, 4, 5];
    
}

标签： javascriptreactjstypescriptfunctionslider