reactjs - 如何使用对象更改依赖项创建挂钩

Question

在我的 threejs 应用程序中，我想在我的相机缩放更改时使用回调以更新一个 ui 缩放滑块。

我设置了一个useCallback，但我有一个错误错误：变量'camera' is used before being assigned.ts(2454)

    export const SceneComponent = (props: Props): ReactElement => {
        const reactCanvas = useRef(null); 
        let camera: THREE.PerspectiveCamera;

        useEffect(() => {
            let width = reactCanvas.current.clientWidth;
            let height = reactCanvas.current.clientHeight;
            const scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera(75, width / height, 1, 10000);
        }, [reactCanvas]);

        const handleCameraZoomChanged = useCallback(() => {
            console.log('Camera zoom changed');
        }, [camera.zoom]);

    return (
        <div className='scene-component'>
            <Toast ref={toastReload} />
            <PlayerBtn />
            <SliderSpeed />
            <SliderTimeline />
            <SliderZoom />
            <canvas className='canvas-holder' ref={reactCanvas} {...rest} />
        </div>
    );
};

我不知道这是否真的是一个好方法，但我尝试如下，并且知道我有一个错误：无法分配给“当前”，因为它是这一行的只读 property.ts(2540)： CameraZoom.current = camera.zoom;

    export const SceneComponent = (props: Props): ReactElement => {
        const reactCanvas = useRef(null); 
        const CameraZoom = useRef(null); 

        let camera: THREE.PerspectiveCamera;

        useEffect(() => {
            let width = reactCanvas.current.clientWidth;
            let height = reactCanvas.current.clientHeight;
            const scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera(75, width / height, 1, 10000);

        const renderScene = () => {
            renderer.render(scene, camera);
            CameraZoom.current = camera.zoom;
        };
        }, [reactCanvas]);

        const handleCameraZoomChanged = useCallback(() => {
            console.log('Camera zoom changed');
        }, [CameraZoom.current]);

    return (
        <div className='scene-component'>
            <Toast ref={toastReload} />
            <PlayerBtn />
            <SliderSpeed />
            <SliderTimeline />
            <SliderZoom />
            <canvas className='canvas-holder' ref={reactCanvas} {...rest} />
        </div>
    );
};

标签： reactjsthree.js