如何每30分鐘在TileLayer（React Leaflet）中申請新的瓷磚？

Question

這是我有：

const RL = require('react-leaflet'); 
var Map = RL.Map; 
var TileLayer = RL.TileLayer; 

<Map 
    zoom={14} 
    zoomSnap={0} 
    style={{height: "100%"}} 
    ref={(map) => { this.map = map; }} 
> 
    <TileLayer url={`https://api.mapbox.com/styles/v1/${process.env.MAPBOX_URL}/tiles/256/{z}/{x}/{y}@2x?fresh=true&access_token=${process.env.MAPBOX_API}`}/> 

但我無法弄清楚如何申請新的瓷磚每30分鐘？我需要它來顯示更新的交通信息...

Answer 1

您的目標是每30分鐘重新渲染包含Map和TileLayer的組件。爲此，您需要組件中的某種狀態，每30分鐘更換一次。要安排更新，setInterval方法是要走的路。

是說，讓我們假設你的組件被稱爲Parent，讓我們腳手架它：

class Parent extends Component { 

    state = { 
    updatesCount: 0 
    }; 

    intervalId = null; 

    componentDidMount() { 
    this.intervalId = setInterval(this.update, 1800000) // every 30 mins 
    } 

    update =() => { 
    // this function will be called every 30 mins, updating the state and causing the component to re-render 
    this.setState({ updatesCount: this.state.updatesCount++ }); 
    } 

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

    render() { 
    <div> 
     <Map 
     zoom={14} 
     zoomSnap={0} 
     style={{height: "100%"}} 
     ref={(map) => { this.map = map; }} 
     > 
     <TileLayer url={`https://api.mapbox.com/styles/v1/${process.env.MAPBOX_URL}/tiles/256/{z}/{x}/{y}@2x?fresh=true&access_token=${process.env.MAPBOX_API}`}/> 
    </div> 
    } 


}