组件呈现问题(长读)

Question

我正在动态地从我的数据库中获取数据，以显示在我的网站上，但我遇到了一个问题，不知道如何修复它。

我有一个主页，其中加载了一堆瓷砖，您可以点击并带您到我的SPA的另一个页面。您可以单击的一些瓷砖可以从文件中呈现STL对象，或者某些瓷砖单击时不会呈现STL对象。

我在呈现STL文件的组件中遇到了一个问题。

问题？

1. 可点击组件是多重呈现我的模型组件(或者类似的东西？)
2. 我已经为每个页面视图卸载和重新装入<Model/>了吗？
3. 项目设置的一般问题？
4. 关于STL (模型)组件的问题可以在底部找到

提供

1. Home.js (主要组件)
2. ClickableImage (返回[]的组件]
3. 动态内容页( Layout.js )
4. Model.js (加载我的模型的组件)
5. 可复制代码当前问题CodeSandBox

更新

11:03pm Feb 23 : Added in CodeSandBox

代码框代码解释。2图片显示，点击第一个图像将带您到一个布局，不加载在STL文件。第二个图像是这样的。那就是一切都破裂的时候。

在Model.js中的`/src/components/Layout/

Home.js

class Home extends Component {
    render() {
        const {projects} = this.props;
        return (
            <section className="max-container">
                <div className="home-layout">
                    <div className="grid pl-4 pr-4">
                        <ClickableImage projects={projects}/>
                    </div>
                </div>
            </section>
        );
    }
}

ClickableImage

const ClickableImage = ({projects}) => {
    const mappedData = projects && projects.map((project, index) => {
        return (
            <Link to={'/project3D/' + project.projectId} key={index}>
                <img
                    src={project.banner}
                    alt="img" className="clickImage"/>
            </Link>
        );
    })

    return (
        mappedData
    );
}

Layout.js (/project3D/)

...
<div className="content-div">
    <Canvas camera={{ position: [0, 10, 100] }}>
        <Suspense fallback={null}>
            <Model url={"./RaspberryPiCase.stl"} />
        </Suspense>
        <OrbitControls />
    </Canvas>
</div>
...

这就是我页面上所有东西的总体布局。

主页->点击图片->布局页面。

现在事情变得有点奇怪了。

布局页面上的Canvas部分在试图加载它时给出了这个错误。

Uncaught invalid array length react-reconciler.development.js:7648

The above error occurred in the <Model> component:

Model@http://localhost:3000/static/js/main.chunk.js:2430:15
Suspense
Canvas@http://localhost:3000/static/js/0.chunk.js:137042:66

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

但是，当我将画布部分复制到我的Home Component时，它将毫无问题地呈现我的STL文件，然后它也会在我的另一个页面上加载我的STL文件。

这里有一些图片，可以在我的主组件中显示问题，而不粘贴<Canvas>。

PreHome粘贴

​

​

在家庭组件中粘贴画布后

​

​

Model.js

import React, {useEffect, useRef} from "react";
import {STLLoader} from "three/examples/jsm/loaders/STLLoader";
import {useLoader, useThree} from "react-three-fiber";

export const Model = ({url}) => {
    const geom = useLoader(STLLoader, url);

    const ref = useRef();
    const {camera} = useThree();
    useEffect(() => {
        camera.lookAt(ref.current.position);
    }, [camera]);

    return (
        <>
            <mesh ref={ref}>
                <primitive object={geom} attach="geometry"/>
                <meshStandardMaterial color={"orange"}/>
            </mesh>
            <ambientLight/>
            <pointLight position={[10, 10, 10]}/>
        </>
    );
};

我只是研究了更多，但很明显，useLoader是最有可能抛出我的错误，我不知道为什么。(只知道这一点，因为当我注释掉错误时，错误就消失了)

如果需要更多信息，请使用lmk。

Answer 1

问题是，useLoader()在获取您在url变量中提供的文件时遇到问题。

在您的示例中，最终以"url“的形式提供的值是"./RaspberryPiCase.stl"。

要解决您的问题，只需提供完整的绝对URL，您的STL文件可以从那里获取。

基于您提供的Codesandbox，它位于您的项目/public文件夹中，因此解决问题的一个简单方法是：

export const Model = ({url}) => {
    const fullUrl = `${window.href.origin}${url.replace(".", "")}`;
    const geom = useLoader(STLLoader, fullUrl);
    // ...

看它的实况在你的密码箱的叉上。

此外，您还可以跟踪这一讨论，以防实际的资源URL实际上不是公共的(即。需要某种身份验证)。在该场景中，您可以首先将资源.gtl文件作为arrayBuffer获取，然后将其传递给加载程序。