Javascript 如何设置状态以自动刷新google地图内容

我建造了一个小船可视化仪。我正在使用。从API中获取数据后，我能够获得我感兴趣的容器的

json

文件，并将这些容器注入表中。 用户必须按页面左上角的刷新按钮手动更新页面，才能看到新更新的表

问题：如何设置状态以每分钟自动刷新

谷歌地图

内容，而不是用户手动刷新

代码如下：

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

或者可以将间隔设置为刷新率

---

我有点困惑，什么是最好的方法来实现这一点。

在您的请求函数中，我想您希望在api不返回时禁用按钮，因此可以将此部分移到请求上方：

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

如果我错了，您可以从第二个设置状态中删除超时，并在第一个设置状态中作为回调调用，如下所示：

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

在最后一部分，而不是location.reload（）上，设置一个在您的componentDidMount上调用更新的间隔：

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

---

然后，在componentWillUnmount上，清除间隔

this.state.updateInterval

超时运行一次，使用setInterval，将间隔返回存储在某个变量中，并在卸载前阻止间隔（因此在更改页面后间隔不会继续）。不确定这是否是最好的解决方案though@EulerRibeiroSudbrack，感谢您抽出时间阅读问题。如果可能的话，你能提供一个带有代码的答案吗？这会让我理解你的建议。我已经发布了一个答案（没有测试，所以你可能需要做一些调整：）

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