如何设置状态以自动刷新 google-map-content

Question

I built a small boat visualizer. I am using AISHub APIs . After fetching data from the APIs I am able to obtain a json file with the vessels I am interested in and inject these vessels inside a table. The user has to manually update the page pushing the refresh button on top left of the page to see the new updated table.

The problem : How to set a state to refresh the google-map content automatically every minute instead of the user doing it manually?

Below the code:

GoogleMap.js

class BoatMap extends Component {
    constructor(props) {
        super(props);
        this.state = {
            buttonEnabled: true,
            buttonClickedAt: null,
            progress: 0,
            ships: [],
            type: 'All',
            shipTypes: [],
            activeShipTypes: [],
            logoMap: {}
        };
        this.updateRequest = this.updateRequest.bind(this);
        this.countDownInterval = null;
    }

    async componentDidMount() {
        this.countDownInterval = setInterval(() => {
            if (!this.state.buttonClickedAt) return;
            const date = new Date();
            const diff = Math.floor((date.getTime() - this.state.buttonClickedAt.getTime()) / 1000);

            if (diff < 90) {
                this.setState({
                    progress: diff,
                    buttonEnabled: false
                });
            } else {
                this.setState({
                    progress: 0,
                    buttonClickedAt: null,
                    buttonEnabled: true
                });
            }
        }, 500);
        await this.updateRequest();

        const shipTypeResults = await Client.getEntries({
            content_type: 'competitors'
        });

        console.log(shipTypeResults);
        const shipTypes = shipTypeResults.items.map((data) => data.fields);

        const logoMap = shipTypes.reduce((acc, type) => {
            return {
                ...acc,
                [type.name]: type.images.fields.file.url
            };
        }, {});
        console.log({ shipTypes });
        this.setState({
            logoMap
        });
    }

    componentDidUpdate(prevProps, prevState) {
        if (this.state.type !== prevState.type) {
        }
    }

    componentWillUnmount() {
        clearInterval(this.countdownInterval);
    }

    async updateRequest() {
        const url = 'http://localhost:3001/hello';
        console.log(url);
        const fetchingData = await fetch(url);
        const ships = await fetchingData.json();

        console.log(ships);

        this.setState({
            buttonEnabled: false,
            buttonClickedAt: new Date(),
            progress: 0,
            ships
        });
        setTimeout(() => {
            this.setState({ buttonEnabled: true });
        });
    }


render() {
    return (
        <div className="google-map">
            <GoogleMapReact
                bootstrapURLKeys={{ key: 'KEY' }}
                center={{
                    lat: this.props.activeShip ? this.props.activeShip.latitude : 42.4,
                    lng: this.props.activeShip ? this.props.activeShip.longitude : -71.1
                }}
                zoom={8}
            >
                </GoogleMapReact>
            </div>
        );
    }
}

What I have done so far:

A good way would be using a setTimeout() but would that be correct? Where should that be applied and how?

setTimeout(function () { 
      location.reload();
    }, 60 * 1000);

Or maybe setting an interval as a refresh rate?

I am a bit confused on what would the best way to approach this.

Answer 1

On your request function i guess u want to disable the button while the api doesn't return, so maybe move this piece above the requests:

    this.setState({
        buttonEnabled: false,
        buttonClickedAt: new Date(),
        progress: 0,
        ships
    });

If im wrong you could remove the timeout from the second setState and call as a callback on the first like this:

    this.setState({
        buttonEnabled: false,
        buttonClickedAt: new Date(),
        progress: 0,
        ships
    }, () => {
        this.setState({ buttonEnabled: true });
    });

on the last part instead of location.reload() set a interval calling the update on ur componentDidMount:

let updateInterval = setInterval(() => { 
  this.updateRequest();
}, 60 * 1000);
this.setState({updateInterval})

then on the componentWillUnmount you clear the interval this.state.updateInterval