React Unity WebGL 不工作 |无法读取 null 的属性（读取“useState”）

Question

我目前正在建立一个基本的 React 网站，其中包含一个 WebGL 应用程序。我成功地遵循了 React 的“入门”指南 [1]，然后尝试使用一个简单的示例 [2] 来集成 WebGL 应用程序。

但是我收到一条空错误消息。

1. 
2. 
3. WebGL 应用程序 github.io

App.js 中的代码：

import React from "react";
import { Unity, useUnityContext } from "react-unity-webgl";

function App() {
  const { unityProvider } = useUnityContext({
    loaderUrl: "Webbuild/Build/Webbuild.loader.js",
    dataUrl: "Webbuild/Build/Webbuild.data",
    frameworkUrl: "Webbuild/Build/Webbuild.framework.js",
    codeUrl: "Webbuild/Build/Webbuild.wasm",
  });
  
  return <Unity uunityProvider={unityProvider} />
}

export default App;

有人有办法解决这个问题吗？

谢谢！

[1] https://create-react-app.dev/docs/getting-started/
[2] https://react-unity-webgl.dev/docs/quick-start/simple-example

我尝试在这里寻找不同的解决方案，但其中很多都没有遵循我试图实现的相同“简单示例”。

我期望 webgl 应用程序的运行与此类似 https://sean-sanii-nejad.github.io/PixelGame/

Answer 1

所以我重新创建了您在 vscode 中设置环境的方式，并注意到您的组件道具上有一个拼写错误（需要是 unityProvider 而不是 uunityProvider）。

您可能还需要尝试一下 webgl 文件在 CRA 公共文件夹中的位置，我建议它在 public 中拥有自己的专用文件夹。

这是我用来让它工作的示例代码（与入门指南基本相同）

import React from "react";
import { Unity, useUnityContext } from "react-unity-webgl";

function App() {
 const { unityProvider } = useUnityContext({
   loaderUrl: "build/crateclicker.loader.js",
   dataUrl: "build/crateclicker.data",
   frameworkUrl: "build/crateclicker.framework.js",
   codeUrl: "build/crateclicker.wasm",
 });

return (
  <>
    <Unity
      unityProvider={unityProvider}
      style={{ width: 800, height: 600 }}
    />
  </>
 );
}

export default App;