未跨多个 useEffects 定义的全局变量

Question

我正在尝试设置一个根据 Redux 状态飞往不同位置的 Mapbox。我使用了两个 useEffects：第一个渲染地图，第二个根据状态变化飞到位置。我这样做是为了让地图不会在每次状态更改时都重新渲染，这会阻止平滑的 flyTo 动画。我试图在 useEffects 之外声明一个全局映射变量以赋予它全局范围，但是在状态更改时，第二个 useEffect 的映射变量未定义。

我无法找到一种无需重新渲染整个地图即可更新地图位置的方法。我认为第二个 useEffect 可以解决问题，但是这个全局声明的变量不起作用，我不确定为什么。

const Map = (props) => {
    
    mapboxgl.accessToken = 'ACCESS_TOKEN';

    const mapContainer = useRef(null);

    let map;

    useEffect(() => {

        map = new mapboxgl.Map({
            container: mapContainer.current
        });

    }, []);

    useEffect(() => {

        map.flyTo({
            center: [
                props.map.lng,
                props.map.lat
            ]
        })

        map.zoom = props.map.zoom;

        new mapboxgl.Marker().setLngLat(props.map).addTo(map);

    }, [props.map]);

    return (
        <div>
            <div ref={mapContainer} className={styles.mapContainer}/>
        </div>
    );
};

const mapStateToProps = state => {
    return {
        map: state.map
    }
}

export default connect(mapStateToProps)(Map);

Answer 1

map 在每个渲染周期重新声明，因此当第一个效果未设置时未定义。也使用 ref 来存储 map 。记得通过 map.current 访问以获取 ref.

的当前值

const Map = (props) => {
    
    mapboxgl.accessToken = 'ACCESS_TOKEN';

    const mapContainer = useRef(null);
    const map = useRef();

    useEffect(() => {

        map.current = new mapboxgl.Map({
            container: mapContainer.current
        });

    }, []);

    useEffect(() => {

        map.current.flyTo({
            center: [
                props.map.lng,
                props.map.lat
            ]
        })

        map.current.zoom = props.map.zoom;

        new mapboxgl.Marker().setLngLat(props.map).addTo(map.current);

    }, [props.map]);

    return (
        <div>
            <div ref={mapContainer} className={styles.mapContainer}/>
        </div>
    );
};

未跨多个 useEffects 定义的全局变量

Global variable not defined across multiple useEffects

javascript

mapbox

reactjs