Question

我认为反应组件取决于状态以更改/渲染视图，但是为什么调用mapbox-gl的setStyle函数会更改地图样式而不更改状态？

class WebMap extends React.Component {
state = {

    style:"mapbox://styles/noeltech/cj6jcxggi5jpr2smhnsb42h3i",
    lng:122.5683,
    lat:10.7028,
    zoom:14
};
componentDidMount(){
    const {lng, lat,zoom,style } = this.state;
    const map = new mapboxgl.Map({
        container: this.mapContainer,
        style: style,
        center: [lng, lat],
        zoom
    });

    map.on('move', () => {
        const {lng, lat } =map.getCenter();

        this.setState({
            lng: lng.toFixed(4),
            lat: lat.toFixed(4),
            zoom: map.getZoom().toFixed(2)
        });
        console.log(`lng: ${lng}  lat:${lat}`)
    });

    setTimeout(()=>{
        // this.setState({style:"mapbox://styles/noeltech/cj6zr2fda9jyz2smst427o4gb"})
        map.setStyle("mapbox://styles/noeltech/cj6zr2fda9jyz2smst427o4gb")
        console.log(this.state.style)
    },5000);

Answer 1

map变量是Mapbox地图实例的引用，因此，制作map.setStyle()时，您将更改此引用实例的样式，而this.state是当前实例的状态包装map-container的组件。仅当地图实例具有例如onStyleChange（）

这样的侦听器时，内部更改才会触发外部状态更改。

Answer 2

我在setState函数中缺少代码，我必须添加：

   function() {
                map.setStyle(this.state.style)

   setTimeout(()=>{
        this.setState({
            style: "mapbox://styles/noeltech/cj6zr2fda9jyz2smst427o4gb"
        },
            function() {
                map.setStyle(this.state.style)
            }
        )        
    },5000);

为什么Mapbox gl仅在React中通过setStyle调用更改其样式而不更改状态？

2 个答案: