React Native项目react-three/fiber渲染Canvas报错无效Hook调用如何解决

错误原因 #

你编写的MyCanvas是类组件（Class Component），而React Hooks（包括useRef、useState以及react-three-fiber提供的useFrame）只能在函数组件的顶层作用域调用，不能在类组件的render方法、类成员方法内部调用，因此触发了非法Hook调用的报错。

解决方法 #

推荐直接将MyCanvas改为函数组件即可，修改后的代码如下：

// 改为函数组件写法
export const MyCanvas = (props) => {
  // 所有Hook放在函数组件顶层，不要嵌套在其他方法内
  const mesh = useRef()
  const [hovered, setHover] = useState(false)
  const [active, setActive] = useState(false)
  useFrame(() => (mesh.current.rotation.x += 0.01))

  return (
      <Canvas>
        <mesh
          {...props}
          ref={mesh}
          scale={active ? 1.5 : 1}
          onClick={(event) => setActive(!active)}
          onPointerOver={(event) => setHover(true)}
          onPointerOut={(event) => setHover(false)}>
          <boxGeometry args={[1, 2, 3]} />
          <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
        </mesh>
      </Canvas>
  );
}

如果确实需要保留类组件写法，需要把Hook对应的逻辑全部替换为类组件原生实现：

• useRef对应类组件的React.createRef()
• useState对应类组件的this.state和this.setState
• 注意react-three-fiber的useFrame没有类组件对应的官方API，涉及3D动画的场景建议优先使用函数组件写法，避免额外适配成本。

内容的提问来源于stack exchange，提问作者Cedric Martens