TS2532-对象可能未定义-useRef和react-three-fiber-纤维

时间:2020-05-07 18:32:59

标签: reactjs typescript tslint react-three-fiber

我正在实现一个带有react-three-fiber的组件,它看起来像这样:

#include "imu/imu.h"
double x,y,z;
IMU myImu = IMU();
int main_state =0;


void setup() {
  // put your setup code here, to run once:

}

void loop() {
  if (main_state ==0){
    // Machine state 0
       main_state = 1;
    //Todo code here
    myImu.readAcc(&x,&y,&z);
    Serial.print(x);

  }else if (main_state == 1 ){
    // Machine state 1
       main_state = 2;
    //Todo code here

  }else if (main_state == 2 ){
    // Machine state 2
       main_state = 3;
    //Todo code here

  }else if (main_state == 3 ){
    // Machine state 3
       main_state = 4;
    //Todo code here

  }else if (main_state == 4 ){
    // Machine state 4
       main_state = 5;
    //Todo code here

  }else if (main_state ==5 ){
    // Machine state 5
       main_state = 0;
    //Todo code here    

  }
}

我尝试添加:

Ubuntu 19.1
GNOME Shell 3.34.1

以及:

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}
            />
        );
    };

A可乐。我感觉就像是在不动的Typescript墙上砸头!

我在做什么错?

(可以根据需要创建代码沙箱)

1 个答案:

答案 0 :(得分:1)

您将需要提供useRef的遗传类型参数的类型,并将其初始化为null。

const controlsRef = useRef<OrbitControls>(null);

我不确定要使用的确切接口/类型,因为我不熟悉要使用的库,但这是一般想法。

此外,在useEffect挂钩中,使用可选的链接就足够了(如果您使用TypeScript 3.7.5及更高版本,则提供此链接)

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