useMemo问题与React三纤维添加画布

Question

我有下面的包。Json，我安装了三个，三个/drei和三个/fiber和三个/postprocessing

{
"dependencies": {
"@react-three/drei": "9.14.3",
"@react-three/fiber": "8.0.26",
"@react-three/postprocessing": "2.4.4",
"three": "^0.141.0"
}
}

---

当前代码正在将画布对象添加到react应用程序中，Box只是一个返回网格元素的组件

import React, { Suspense } from "react";
import { Canvas } from "@react-three/fiber";
import Box from "./Box";
const ThreeD = () => { 
return (
<div>
<Suspense fallback={null}>
<Canvas shadows>
<Box />
</Canvas>
</Suspense>
</div>
);
};

在加载页面时，我遇到了以下问题:

加载错误我尝试使用useMemo如下所示，但同样的问题仍然存在，

import React, { Suspense, useMemo } from "react";
import { Canvas } from "@react-three/fiber";
import Box from "./Box";
const ThreeD = () => {
const Canv = useMemo(() => {
return (
<Canvas>
<Suspense fallback={null}>
<Box />
</Suspense>
</Canvas>
);
});
return (
<div>
<Canv />
</div>
);
};
export default ThreeD;

节点版本:8.19.2

问题源于文件:(react-three-fiber.esm.js:119:1)中的代码:React.useMemo(() =>扩展(3),[]);

Answer 1

我想它可以帮助你。你应该在useMemo中添加依赖数组，并正确使用useMemo的结果。

import React, { Suspense, useMemo } from "react";
import { Canvas } from "@react-three/fiber";
import Box from "./Box";
const ThreeD = () => {
const Canv = useMemo(() => (
<Canvas>
<Suspense fallback={null}>
<Box />
</Suspense>
</Canvas>
), []);

return (
<div>
{Canv}
</div>
);
};

Answer 2

我发现了这个问题，我正在主项目文件夹外安装软件包