如何解决为什么我的 React Slider 两次调用我的函数?
我正在我的页面上渲染一个 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];
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。