Question

React Fiber ThreeJs 组件渲染问题（未定义数据 Line2.computeLineDistances）

2022-06-08

1420

javascript reactjs three.js react-three-fiber react-three-drei

我在以下 codesandbox 中重现了我的 React App 的 3 个组件

正如您在 demo 中看到的，我有 3 个 React ThreeJS 组件，可以旋转、移动和缩放，没有任何问题。

问题出在我的本地应用程序中，代码完全相同 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>
  )
}

这是我在控制台中看到的错误 => 未捕获的 TypeError：无法读取 Line2.computeLineDistances 中未定义的属性（读取“数据”）

我发现问题是由 react three fiber 版本引起的，实际上，如果我将应用程序从 "@react-three/fiber":` "^8.0.20" 降级到 codesandbox 演示 "@react-three/fiber": "^7.0.24" ，错误就会消失，并且像在演示中一样工作。所以我的问题是为什么我在使用 react/three/fiber 8.0.20 时会出现此错误

Answer 1

该问题是由软件包之间的不兼容引起的

"@react-three/drei": "9.13.2",
"@react-three/fiber": "8.0.20",

并且可以通过将两个软件包都升级到最新版本来修复：

"@react-three/drei": "latest",
"@react-three/fiber": "latest",

我假设不兼容与 React 18 中的变化有关，它引入了并发渲染功能。

我的猜测是，如果这两个库都使用这些并发功能（如果两者都使用最新版本）或者都不使用，那么它们可以很好地协同工作。我认为您发生错误是因为在未升级 @react-three/drei 的情况下将 @react-three/fiber 升级到较新版本，这两个库对于是否依赖 React 18 并发性有不同的看法。

请注意，为了真正受益于这些并发功能，您应该以略有不同的方式在 index.js 中初始化您的应用程序：

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