0
265
ViewsProblemas de representación de componentes de React Fiber ThreeJs (datos indefinidos Line2.computeLineDistances)
He reproducido 3 componentes de mi React App en los siguientes códigos y caja
Como puede ver en la demostración , tengo 3 componentes de reacción tres js, rotando, moviendo y haciendo zoom sin problemas.
El problema está en mi aplicación local con exactamente el mismo código App.js
export default function App() { return ( <FullScreenCanvas> <OrbitControls enableZoom={true} enablePan={true} enableRotate={true} /> <Suspense fallback={null}> <Thing /> <CircleLine linewidth={2} /> <Triangle color="#ff2060" scale={0.009} rotation={[0, 0, Math.PI / 3]} /> </Suspense> </FullScreenCanvas> ) }Este es el error que veo en mi consola => TypeError no capturado: no se pueden leer las propiedades de undefined (leyendo 'datos') en Line2.computeLineDistances
Descubrí que el problema fue causado por la versión de fibra de reaccionar tres, de hecho, si baje de categoría en mi aplicación de "@react-tres/fibra": `"^8.0.20" , a la demostración de codesandbox "@react- three/fiber": "^7.0.24" , el error desapareció y funciona como en la demostración. entonces mi pregunta es por qué tengo este error con react/tres/fibra 8.0.20
1 answers
Answer question0
El problema se debe a una incompatibilidad entre los paquetes.
"@react-three/drei": "9.13.2", "@react-three/fiber": "8.0.20",y se puede solucionar actualizando ambos paquetes a su última versión:
"@react-three/drei": "latest", "@react-three/fiber": "latest",Supongo que la incompatibilidad está relacionada con los cambios en React 18, que introduce funciones de renderizado concurrente.
Supongo que las dos bibliotecas funcionan bien juntas si ambas usan estas características de concurrencia (si usa la última versión para ambas) o si ambas no. Supongo que su error ocurrió porque al actualizar @react-three/fiber a una versión más nueva sin actualizar @react-three/drei , las dos bibliotecas tenían ideas diferentes sobre si confiar o no en la concurrencia de React 18.
Tenga en cuenta que, para beneficiarse realmente de estas funciones simultáneas, debe inicializar su aplicación en index.js de una manera ligeramente diferente:
import React from 'react' import {createRoot} from 'react-dom/client' import App from './App' import './styles.css' const container = document.getElementById('root') const root = createRoot(container) root.render(<App />)