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