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

Question

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

创建实例后，我想注册一个回调，如果用户与地图交互，则会触发该回调。在此回调中，我想访问组件的状态。如何在不导致循环的情况下执行此操作？如果我不将我的状态添加到第二个参数中，则每次运行回调时状态都保持不变(如预期的那样(，但是如果我添加它，则会导致循环。

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)
});
}, []);
}