React：Slider onChangeEnd 之后的无限函数调用循环

如何解决React：Slider onChangeEnd 之后的无限函数调用循环

当我更改滑块的值时，它应该调用函数 onChangeEnd。但是，当发生这种情况时，会在无限循环中调用 calculateEvent 函数。这将永远持续下去，即使之后我一直在移动我的滑块。为什么会发生这种情况？

var yearStart = 0;
var yearEnd = 50;
var years : number[] = [];
while(yearStart < yearEnd+1){
    years.push(yearStart++);
}
const xAxis : number[] = years;

const Savings = () => {

    const [initialSavings,setInitialSavings] = React.useState<string>("5000");
    const [monthlyDepo,setMonthlyDepo] = React.useState<string>("100");
    const [interestRate,setInterestRate] = React.useState<number>(2);
    const [yAxis,setYAxis] = React.useState<number[]>([]);

    const handleChange = useCallback((newValue) => {
        setInterestRate(newValue);
      },[]);

    const calculateEvent = useCallback((event : string,slider : number,option : number) => {
        switch(option) {
            case 1:
              setInitialSavings(event);
              break;
            case 2:
              setMonthlyDepo(event);
              break;
            case 3:
              setInterestRate(slider);
          }
        console.log("Calculate event called with slider value: ",interestRate);
        getProjection(initialSavings,monthlyDepo,interestRate).then((m) => {
            console.log(m);
            setYAxis(m);
        })
    },[initialSavings,interestRate]);

    return(
    <DefaultLayout>
        <Container pt={6}>
            <VStack spacing={4}>
                <Heading as="h1">Interest Rate Calculator</Heading>
                <Heading as="h4">{initialSavings},{monthlyDepo},{interestRate}</Heading>
                <Input 
                    label="Initial Savings amount" 
                    name="Initial Savings" 
                    onInput={e => calculateEvent(e.currentTarget.value,1)} 
                    placeholder="5000"
                />
                <Input 
                    label="Monthly Deposit" 
                    name="Monthly Deposit" 
                    onInput={e => calculateEvent(e.currentTarget.value,2)} 
                    placeholder="100"
                />
                <Slider
                    label="Interest Rate"
                    name="Interest Rate"
                    value={interestRate}
                    min={1}
                    max={15}
                    step={1}
                    onChange={handleChange}
                    onChangeEnd={e => calculateEvent("",e,3)} 
                    focusThumbOnChange={false}
                    role="group"
                    onFocus={(e) => {
                        e.preventDefault();
                    }}
                />
                <LineChart
                    title="Savings Over time"
                    xAxisData={xAxis}
                    yAxisData={yAxis}
                    xLabel="Years"
                    yLabel="Amount"
                />
            </VStack>
        </Container>
    </DefaultLayout>
    )
}

解决方法

好的，这就是我的建议。

让我们将 calculateEvent 函数分解为单独的组件。

然后，让我们创建一个 useEffect 回调，它会在我们的输入发生变化时重新计算投影。我更愿意在渲染时执行此操作，但由于 getProjection 返回了一个 promise，因此我们被困在效果上。

现在，我明白您为什么要使用 onChangeEnd 事件了。 getProjection() 开销很大，因此您只想在用户完成选择值后调用它。

所以让我们把它分成两种状态。管理滑块值的一种状态。然后是第二个状态来保存实际的 interestRate 值。我们将等待更新 interestRate 值，直到调用 onChangeEnd。

此外，让我们确保通过在这些输入上放置值并使用 onChange 而不是 onInput 来控制这些输入。

var yearStart = 0;
var yearEnd = 50;
var years: number[] = [];
while (yearStart < yearEnd + 1) {
  years.push(yearStart++);
}
const xAxis: number[] = years;

const Savings = () => {
  const [initialSavings,setInitialSavings] = React.useState<string>('5000');
  const [monthlyDepo,setMonthlyDepo] = React.useState<string>('100');
  const [interestRate,setInterestRate] = React.useState<number>(2);
  const [interestRateSlider,setInterestRateSlider] = React.useState<number>(2);
  const [yAxis,setYAxis] = React.useState<number[]>([]);

  const handleSavingsChange = (e) => {
    setInitialSavings(e.target.value);
  }

  const handleMonthlyDepoChange = (e) => {
    setMonthlyDepo(e.target.value);
  }

  const handleInterestRateSliderChange = (value) => {
    setInterestRateSlider(value);
  };

  const handleInterestRateSliderChangeEnd = (value) => {
    setInterestRate(value)
  }

  useEffect(() => {
    getProjection(initialSavings,monthlyDepo,interestRate).then((m) => {
      setYAxis(m);
    });
  },[initialSavings,interestRate])

  return (
    <DefaultLayout>
      <Container pt={6}>
        <VStack spacing={4}>
          <Heading as="h1">Interest Rate Calculator</Heading>
          <Heading as="h4">
            {initialSavings},{monthlyDepo},{interestRate}
          </Heading>
          <Input
            label="Initial Savings amount"
            name="Initial Savings"
            value={initialSavings}
            onChange={handleSavingsChange}
            placeholder="5000"
          />
          <Input
            label="Monthly Deposit"
            name="Monthly Deposit"
            value={monthlyDepo}
            onChange={handleMonthlyDepoChange}
            placeholder="100"
          />
          <Slider
            label="Interest Rate"
            name="Interest Rate"
            value={interestRate}
            min={1}
            max={15}
            step={1}
            onChange={handleInterestRateSliderChange}
            onChangeEnd={handleInterestRateSliderChangeEnd}
            focusThumbOnChange={false}
            role="group"
            onFocus={(e) => {
              e.preventDefault();
            }}
          />
          <LineChart
            title="Savings Over time"
            xAxisData={xAxis}
            yAxisData={yAxis}
            xLabel="Years"
            yLabel="Amount"
          />
        </VStack>
      </Container>
    </DefaultLayout>
  );
};