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

我建立了一个小船可视化器。我正在使用AISHub API。从API提取数据后，我可以获取json我感兴趣的容器的文件，并将这些容器插入表中。用户必须按页面左上方的刷新按钮来手动更新页面，以查看新的更新表。

问题：如何设置状态以google-map每分钟自动刷新一次内容，而不是由用户手动刷新？

代码下方：

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

到目前为止，我所做的是：

一个好的方法是使用a，setTimeout()但这是正确的吗？应该在哪里应用以及如何应用？

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

还是将间隔设置为刷新率？

我对解决此问题的最佳方法有些困惑。