TS2532 - Возможно, объект не определен - useRef и react-three-fiber - PullRequest
Новая
       82

TS2532 - Возможно, объект не определен - useRef и react-three-fiber

0 голосов
/ 07 мая 2020

Я реализую компонент с react-three-fiber, который выглядит так: 

const Controls = (props: any) => {
        const controlsRef = useRef();
        const { camera, gl } = useThree();

        useFrame(() => controlsRef.current && controlsRef!.current!.update());
        // ^ Errors with Object is possibly 'undefined'

        useFrame(() => {
            if (controlsRef !== undefined && controlsRef.current !== undefined) {
                controlsRef.current.target = new THREE.Vector3(worldMap.length / 2 * CELL_WIDTH, 0, worldMap.length / 2 * CELL_WIDTH)
                // ^ ALSO errors with Object is possibly undefined
            }
        })

        return (
            <orbitControls
                {...props}
                ref={controlsRef}
                args={[camera, gl.domElement]}
                enableRotate
                enablePan={false}
                maxDistance={100}
                minDistance={5}
                maxPolarAngle={Math.PI / 3}
            />
        );
    };

Я пробовал добавить: 

if (controlsRef !== undefined && controlsRef.current !== undefined) {
    controlsRef!.current!.target = ...
    // Errors with target does not exist on type 'never'
}

А также: 

useFrame(() => controlsRef.current && controlsRef?.current?.update());
// Errors with update does not exist on type 'never'

Увы безрезультатно. Я чувствую, как бьюсь головой о неподвижную стену Машинописи!

Что я делаю не так?

(При необходимости можно создать песочницу кода)

1 Ответ

1 голос
/ 07 мая 2020

Вам нужно будет указать типы для параметра типа useRef geneti c и инициализировать его как null. 

const controlsRef = useRef<OrbitControls>(null);

Я не уверен, какой именно интерфейс / набор текста использовать, поскольку я не знаком с библиотекой, с которой вы работаете, но это общая идея.

Кроме того, в вашем useEffect, достаточно будет использовать дополнительную цепочку (если вы работаете с TypeScript 3.7.5 и выше) 

useFrame(() => controlsRef?.current?.update());
...