javascript - 使用 setInterval 将状态增加 1 除非当前状态匹配或大于最大值

Question

我想在当前状态上增加++1 以产生动画“效果”。它通过 setInterval 来完成此操作。我希望当状态与 maxValue 匹配时停止。

目前，它设置状态并跳转到显然跳过增量的值。

我尝试过重新安排这个函数。我在不同的点设置变量。

我发现 newMax 没有采用当前州年份。我不确定情况是否如此，这让我有点困惑。因此，如果我们能够解决这个问题并尝试实现最终结果。

    yearOnChange = e => {
        const newMax = Object.values(this.state.locationData[0].year)[0] / 100000;
        const currentYear = e.currentTarget.value;
        console.log('newMax', newMax, 'currentYear', currentYear)
        const startInterval = () => window.setInterval(incrementScale, 10);
        const cancelInterval = () => window.clearTimeout(startInterval);
        const incrementScale = () => {
            if (this.state.elevationScale > newMax) {
                return cancelInterval();
            }
            return this.setState(prevState => ({
                year: currentYear,
                elevationScale: prevState.elevationScale + 1
            }));
        };
        startInterval();
    };

数据集片段/摘录

[  {
        "location": "City of London",
        "postcode": "EC1A 7BE",
        "year": {
            "10": "464436",
            "11": "442413",
            "12": "525723",
            "13": "465451",
            "14": "625001",
            "15": "783667",
            "16": "736788",
            "17": "820305",
            "18": "802129",
            "19": "864034",
            "95": "91449",
            "96": "108999",
            "97": "116343",
            "98": "124382",
            "99": "149143",
            "00": "173738",
            "01": "284262",
            "02": "344239",
            "03": "261645",
            "04": "326913",
            "05": "330363",
            "06": "316121",
            "07": "360923",
            "08": "471861",
            "09": "400317"
        },
        "longitude": -0.100404,
        "latitude": 51.51775
    },
    {
        "location": "Barking & Dagenham",
        "postcode": "RM9 4TP",
        "year": {
            "10": "162905",
            "11": "163821",
            "12": "163899",
            "13": "167919",
            "14": "184884",
            "15": "220070",
            "16": "258758",
            "17": "282441",
            "18": "291548",
            "19": "298333",
            "95": "50460",
            "96": "50828",
            "97": "54459",
            "98": "57559",
            "99": "64532",
            "00": "71079",
            "01": "82343",
            "02": "98713",
            "03": "134750",
            "04": "150115",
            "05": "164484",
            "06": "162340",
            "07": "176577",
            "08": "194235",
            "09": "166798"
        },
        "longitude": 0.127884,
        "latitude": 51.539774
    }
]

当yearOnChange函数被触发时。如果当前elevationScale状态与newMax不同，则在setInterval上递归加1，直到达到newMax，然后清除setInterval。

如果我遗漏了任何导致此问题的细节，我很乐意编辑此问题。

Answer 1

@davidmitten。刚刚根据您的代码创建了一个示例。我对类型转换和状态管理进行了一些编辑。看看这会有所帮助。并在组件上设置间隔引用来清除间隔。

import React from 'react';
import './App.css';

class App extends React.Component {
  state = {
    elevationScale: 0,
    locationData: [

      {
        location: "City of London",
        postcode: "EC1A 7BE",
        year: {
          "10": "464436",
          "11": "442413",
          "12": "525723",
          "13": "465451",
          "14": "625001",
          "15": "783667",
          "16": "736788",
          "17": "820305",
          "18": "802129",
          "19": "864034",
          "95": "91449",
          "96": "108999",
          "97": "116343",
          "98": "124382",
          "99": "149143",
          "00": "173738",
          "01": "284262",
          "02": "344239",
          "03": "261645",
          "04": "326913",
          "05": "330363",
          "06": "316121",
          "07": "360923",
          "08": "471861",
          "09": "400317"
        },
        longitude: -0.100404,
        latitude: 51.51775
      },
      {
        location: "Barking & Dagenham",
        postcode: "RM9 4TP",
        year: {
          "10": "162905",
          "11": "163821",
          "12": "163899",
          "13": "167919",
          "14": "184884",
          "15": "220070",
          "16": "258758",
          "17": "282441",
          "18": "291548",
          "19": "298333",
          "95": "50460",
          "96": "50828",
          "97": "54459",
          "98": "57559",
          "99": "64532",
          "00": "71079",
          "01": "82343",
          "02": "98713",
          "03": "134750",
          "04": "150115",
          "05": "164484",
          "06": "162340",
          "07": "176577",
          "08": "194235",
          "09": "166798"
        },
        longitude: 0.127884,
        latitude: 51.539774
      }
    ]
  }

  yearOnChange = e => {
    const newMax = Number.parseInt(Object.values(this.state.locationData[0].year)[0]) / 100000;
    const currentYear = e.currentTarget.value;
    console.log("newMax", newMax, "currentYear", currentYear);
    const startInterval = () => {
      this.startInterval = setInterval(incrementScale, 1000);
    }   
    const cancelInterval = () => clearInterval(this.startInterval);
    const incrementScale = () => {
      console.log("Starting timer");
      console.log(this.state.elevationScale, newMax);
      if (
        this.state.elevationScale >
        Number.parseInt(Object.values(this.state.locationData[0].year)[0]) / 100000
      ) {
        cancelInterval();
      } else{
        console.log("Inside elevation scale");
        this.setState({
          year: currentYear,
          elevationScale: this.state.elevationScale + 1
        });
      }
    };
    startInterval();
  };

  render() {
    console.log("Rendering");
    return <button onClick={(e) => this.yearOnChange(e)}>Start</button>
  }
}

export default App;