Увеличивать состояние на 1, если текущее состояние не совпадает или не превышает максимальное значение, используя setInterval

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();
    };

фрагмент данных dataSet / extract

[  {
        "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;