hook.js:608 Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render. Error Component Stack #330
Description
import React from 'react'
import {
EffectComposer,
Outline,
Selection,
Select,
} from '@react-three/postprocessing'
import { Canvas } from '@react-three/fiber'
import { OrbitControls } from '@react-three/drei'
const App = () => {
return (
<Canvas
gl={{ antialias: true }} // 启用抗锯齿
onCreated={({ gl }) => {
gl.setClearColor('rgb(50, 50, 50)')
}}
>
<OrbitControls
enablePan={true} // 允许平移
enableZoom={true} // 允许缩放
enableRotate={true} // 允许旋转
minDistance={5} // 最小缩放距离
maxDistance={20} // 最大缩放距离
minPolarAngle={Math.PI / 4}
maxPolarAngle={Math.PI / 2}
/>
<directionalLight color='#fff' intensity={2} position={[0, 0, 5]} />
<Selection enabled>
<EffectComposer autoClear={false}>
<Outline blur edgeStrength={10} />
</EffectComposer>
<Select enabled> // Why is there a problem with enabled here?
<mesh>
<boxGeometry args={[1, 1, 1]} />
<meshStandardMaterial color='#000' />
</mesh>
</Select>
</Selection>
</Canvas>
)
}
export default App