React useEffect挂钩寄存器回调，可以访问状态

Question

我正在使用第二个参数[]在useEffect挂钩中创建地图组件的新实例，因此它只能运行一次。

创建实例后，我要注册一个回调，如果用户与地图进行交互，则会触发该回调。在此回调中，我想访问组件的状态。我该怎么做而又不会引起循环？如果我不将状态添加到第二个参数，则该状态在每次运行回调时都保持不变（如预期的那样），但是如果添加它，则会导致循环。

export const Map = (props: any) => {
const [state, setState]: [MapState, any] = useGlobalState({
    id: 'MAP',
    initialValue: getInitialValue(initialized),
});

useEffect(() => {
    mapInstance = new mapFramework.Map(});
    mapInstance.on('move', () => {
        console.log(state);
    });
}, []);
}

Answer 1

您可以使用useRef

export const Map = (props: any) => {
const [state, setState]: [MapState, any] = useGlobalState({
    id: 'MAP',
    initialValue: getInitialValue(initialized),
});
const stateRef = useRef(state)

useEffect(()=>{
    stateRef.current = state
}, [state])

useEffect(() => {
    mapInstance = new mapFramework.Map(});
    mapInstance.on('move', () => {
        console.log(stateRef.current)
    });
}, []);
}