javascript - 使用 React 的窗口 DeviceMotion 事件

Question

DeviceMotion当我移动浏览器时，我无法在 React 应用程序中触发该功能。我正在使用window对象devicemotion事件来实现功能。

摘自我的代码

export default function App() {
  const [x, setX] = useState("");
  const [y, setY] = useState("");
  const [z, setZ] = useState("");

  function handleMotionEvent(event) {
    console.log("handle motion event", event);

    var x = event.accelerationIncludingGravity.x;
    var y = event.accelerationIncludingGravity.y;
    var z = event.accelerationIncludingGravity.z;

    setX(x);
    setY(y);
    setZ(z);
  }

  useEffect(() => {
    window.addEventListener("devicemotion", handleMotionEvent, true);
  }, [x, y, z]);

  return (
    <div className="App">
      <h1>Device Motion</h1>
      <div>
        X - {x} Y - {y} Z - {z}
      </div>
    </div>
  );
}

我使用CodeSandbox创建了一个工作示例。有人可以帮忙吗？