javascript - setInterval/setTimeout 可能会导致页面重新加载

Question

我想在 react 中启动状态更改之前触发延迟。这有望使我的套牌 gl 图表动画化。

当前它重新加载页面。

我已经尝试了超时和间隔，但都没有按预期工作。我想我错过了一些与窗口方法工作方式有关的状态。

这是我的功能

yearOnChange = e => {
    const data = {
        0: jan95,
        1: jan00,
        2: jan05
    };
    window.setTimeout(
        this.setState({
            location: data[e.currentTarget.value],
            year: e.currentTarget.value
        }),
        10000
    );
};

这是通过将函数传递给子组件然后通过按钮的 onClick 触发来激活的。

我预计会发生延迟，然后状态会发生变化。

我并不是假装知道这是否是正确的代码、最佳实践或正确的方法。这对我来说是一个新领域，正在寻找最佳实践/解决方案。

如果需要可以编辑代码。

更新:

添加了整个代码以供审查以提供帮助。

至于何时调用它，它只是被传递给一个按钮，并由该按钮触发一个 onClick 事件。

import React, { Component } from "react";
import { StaticMap } from "react-map-gl";
import { H3HexagonLayer } from "@deck.gl/geo-layers";
// import { HexagonLayer } from "@deck.gl/aggregation-layers";
import DeckGL from "@deck.gl/react";
import { jan95, jan00, jan05 } from "../../dummyData/concatData";
// import testData from "../../dummyData/testDataHexNo3.json";
import YearSelector from "../YearSelector/YearSelector";

const MAPBOX_TOKEN =
    "pk.eyJ1Ijoiam5hbGV4YW5kZXIxMCIsImEiOiJjaWlobnE4eGswMDFld2RtNmZxMDl3Nzc3In0.UTaIFjrs21qB1npSeliZbQ";

const mapStyle =
    "mapbox://styles/jnalexander10/cj0xo73a300rr2rta4ny2bj0d/draft/";

const INITIAL_VIEW_STATE = {
    longitude: 0.1278,
    latitude: 51.5074,
    zoom: 7,
    minZoom: 5,
    maxZoom: 10,
    pitch: 50,
    bearing: -27.396674584323023
};

const elevationScale = { min: 0, max: 10 };

class FirstMap extends Component {
    constructor(props) {
        super(props);
        this.state = {
            location: "",
            year: 0,
            elevationScale: elevationScale.min
        };

        this.startAnimationTimer = null;
        this.intervalTimer = null;

        this._startAnimate = this._startAnimate.bind(this);
        this._animateHeight = this._animateHeight.bind(this);
    }

    componentDidMount() {
        this.setState({
            location: jan95
        });

        this._animate();
    }

    _animate() {
        this._stopAnimate();

        // wait 1.5 secs to start animation so that all data are loaded
        this.startAnimationTimer = window.setTimeout(this._startAnimate, 3500);
    }

    _startAnimate() {
        this.intervalTimer = window.setInterval(this._animateHeight, 20);
    }

    _stopAnimate() {
        window.clearTimeout(this.startAnimationTimer);
        window.clearTimeout(this.intervalTimer);
    }

    _animateHeight() {
        if (this.state.elevationScale === elevationScale.max) {
            this._stopAnimate();
        } else {
            this.setState({ elevationScale: this.state.elevationScale + 1 });
        }
    }

    _layerRendering = () => {
        const stateLocation = this.state.location;
        const valuesOfState = stateLocation[0];
        return [
            new H3HexagonLayer({
                id: "h3-hexagon-layer",
                data: valuesOfState && Object.values(valuesOfState),
                pickable: true,
                opacity: 0.15,
                wireframe: true,
                filled: true,
                extruded: true,
                elevationScale: this.state.elevationScale,
                coverage: 50,
                getHexagon: d => d.h3Location,
                getFillColor: [223, 25, 149], // fluorescent pink
                getElevation: d => {
                    console.log("d.price", d.price * 0.5);
                    return Number(d.price / 10);
                }
            })
        ];
    };

    // newData = testData;

    // newData = eval(testData);
    // _layer = new HexagonLayer({
    //  id: "hexagon-layer",
    //  data: testData,
    //  pickable: true,
    //  extruded: true,
    //  radius: 200,
    //  elevationScale: 100,
    //  // upperPercentile: 100,
    //  // getElevationValue: d =>
    //  getPosition: d => d.COORDINATES
    // });

    dataStateChange = () => {
        window.setTimeout(
            this.setState({
                year: jan00
            }),
            2000
        );
        window.setTimeout(
            this.setState({
                year: jan05
            }),
            8000
        );
    };

    // yearOnChange = e => {
    //  const data = {
    //      0: jan95,
    //      1: jan00,
    //      2: jan05
    //  };
    //  window.setTimeout(() => {
    //      this.setState({
    //          location: data[e.currentTarget.value],
    //          year: e.currentTarget.value
    //      });
    //  }, 10000);
    // };

    yearOnChange = e => {
        e.stopPropagation();
        e.nativeEvent.stopImmediatePropagation();
        const data = {
            0: jan95,
            1: jan00,
            2: jan05
        };
        window.setTimeout(
            () =>
                this.setState({
                    location: data[e.currentTarget.value],
                    year: e.currentTarget.value
                }),
            10000
        );
    };

    render() {
        return (
            <div
                style={{
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center"
                }}
            >
                <YearSelector
                    yearOnChange={this.yearOnChange}
                    year={this.state.year}
                    dataStateChange={this.dataStateChange}
                />
                <DeckGL
                    // layers={this._layer}
                    layers={this._layerRendering()}
                    initialViewState={INITIAL_VIEW_STATE}
                    controller={true}
                >
                    <StaticMap
                        reuseMaps
                        mapStyle={mapStyle}
                        MapController
                        preventStyleDiffing={true}
                        mapboxApiAccessToken={MAPBOX_TOKEN}
                    />
                </DeckGL>
            </div>
        );
    }
}

export default FirstMap;

Answer 1

问题是您调用 setState 而不是给 setTimeout 一个函数。这就是您要找的:

yearOnChange = e => {
    const data = {
        0: jan95,
        1: jan00,
        2: jan05
    };
    window.setTimeout(
        () => this.setState({
            location: data[e.currentTarget.value],
            year: e.currentTarget.value
        }),
        10000
    );
};