Почему Mapbox gl меняет свой стиль без изменения состояния при вызове setStyle только в React?

Question

Я думал, что реагирующие компоненты зависят от состояния для изменения / рендеринга вида, но почему вызов функции setStyle из mapbox-gl меняет стиль карты без изменения состояния?

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

Мне не хватает кода в моей функции setState. Я должен добавить:

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

Как это

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

Answer 2

переменная map является ссылкой для экземпляра карты Mapbox, поэтому, когда вы создаете map.setStyle(), вы изменяете стиль этого ссылочного экземпляра, а this.state - это состояние текущего компонента, который вы ' перематывать map-container. Внутреннее изменение не вызовет изменение внешнего состояния, только если экземпляр карты имеет, например, некоторый слушатель для этого, например onStyleChange ()