javascript - 如何自动引用 ReactJS 应用程序

问题描述

我建立了一个小船可视化器。我正在使用AISHub API。从 API 获取数据后，我可以获得一个json包含我感兴趣的容器的文件，并将这些容器注入一个表中。API 允许在 1 分钟后继续进行新的提取，如其文档中所述。用户必须手动更新页面，按下页面左上角的刷新按钮才能看到新的更新表。

问题：是否可以在用户不手动刷新页面的情况下每分钟进行一次自动更新？

为了绕过一分钟的问题，我必须组织一个缓存过程，实际上效果很好。我无需等待一分钟即可刷新，但我必须手动完成。

index.js

var express = require('express');
var router = express.Router();
var axios = require('axios');
const NodeCache = require('node-cache');
const myCache = new NodeCache();

let hitCount = 0;

/* GET home page. */
router.get('/', function(req, res, next) {
    res.render('index', { title: 'Express' });
});

router.get('/hello', async function(req, res, next) {

    const allData = myCache.get('allData');
if (!allData) {
    hitCount++;
    console.log(`hit ${hitCount} number of times`);
    const { data } = await axios.get(
        'http://data.aishub.net/ws.php?username=KEY&format=1&output=json&compress=0&latmin=11.42&latmax=58.20&lonmin=-134.09&lonmax=-52.62'
    );

    console.log(data + 'ERR');

    const [ metaData, ships ] = data;

    const shipsOfInterest = ships.filter(
        (ship) =>
            mmsiOfInterest.includes(ship.MMSI) ||
            shipNamesOfInterest.includes(ship.NAME) ||
            imoOfInterest.includes(ship.IMO)
    );

    myCache.set('allData', shipsOfInterest, 70);
    console.log(shipsOfInterest);

    res.send(shipsOfInterest);

    return;
}

console.log('this is the data:', allData);
res.send(allData);
});

module.exports = router;

谷歌地图.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>
        );
    }
}

我一直在研究如何在不让用户手动操作的情况下自动刷新页面。感谢您指出解决此问题的正确方向。

标签： javascriptnode.jsreactjs

javascript - 如何自动引用 ReactJS 应用程序

问题描述

解决方案

推荐阅读