Início / coding / Perguntas / 79018691
Accepted
Dusan
Asked: 2024-09-24 20:51:28 +0800 CST

Existe uma maneira de executar alguma ação na primeira vez que ref.current estiver disponível?

  • 772

No React, estou usando @react-three/fiberpara coisas 3D. Há muitos componentes que não suportam a maneira declarativa de fazer as coisas e exigem refs e código imperativo (por exemplo, CameraControlsde drei).

Estou tentando inicializar um CameraControlsna inicialização:

const cameraRef = useRef<CameraControls>(null)

const resetCamera = () => {
  if (cameraRef.current == null) return
  cameraRef.current.setLookAt(
    ...cameraInitialPosition,
    ...cameraInitialTarget,
    true
  )
}

useEffect(resetCamera, [])

return (
  <Canvas shadows>
    <CameraControls ref={cameraRef} />
    ...
)

Claro que isso não funciona, pois na primeira e única vez useEffectque é executado, o cameraRef.currentainda é null.

Quando tento usar o hack de timeout, o current ainda é nulo:

useEffect(() => {
  setTimeout(resetCamera, 0)
}, [])

Quando aumento o tempo limite para algumas centenas de ms, ele começa a funcionar:

useEffect(() => {
  setTimeout(resetCamera, 500)
}, [])

Essa abordagem com tempo limite é hackeada e ruim, buscando algo melhor.

Existe uma maneira de escrever um gancho personalizado que retorne refObjecte, mais tarde, quando o atual for preenchido pela primeira vez, execute a função fornecida?

reactjs

1 respostas

  1. Best Answer

    Você pode armazenar a referência com useState, usando a função de estado definido como uma função de retorno de chamada ref , em vez de uma referência de objeto.

    Como o estado definido seria chamado quando a referência estivesse disponível, o estado mudaria e useEffectseria acionado:

    const [cameraRef, setCameraRef] = useState<CameraControls>(null)

const resetCamera = () => {
  if (!cameraRef) return
    
  cameraRef.setLookAt(...cameraInitialPosition, ...cameraInitialTarget, true)
}

useEffect(resetCamera, [cameraRef])

return (<Canvas shadows>
  <CameraControls ref={setCameraRef} />
  ...
)

    Se você usar a referência apenas setLookAtuma vez e não precisar armazená-la, basta chamar resetCameradiretamente da refpropriedade de CameraControls:

    const resetCamera = (cameraRef: CameraControls) => {
  if (!cameraRef) return

  cameraRef.setLookAt(...cameraInitialPosition, ...cameraInitialTarget, true)
}

return (<Canvas shadows>
  <CameraControls ref={resetCamera} />
  ...
)
    • 4

relate perguntas