Question

我的代码是这样的：

从'react'导入React，{useEffect};

import alanBtn from '@alan-ai/alan-sdk-web';

const alanKey = my key;
const App = () => {
    useEffect(() => {
        alanBtn({
            key: alanKey,
            onCommand: ({ command }) => {
                    alert('This code was executed');
            }
        })
    }, []);
    return (
        <div><h1>Alan AI News Application</h1></div>);
}
export default App;

但是我得到的错误是：参考错误：未定义导航器。如何解决？

Answer 1

浏览器对象如 window 、navigator 等应在使用前先在 useEffect 中定义。

  const [pageURL, setPageURL] = useState("");
  const [isNativeShare, setNativeShare] = useState(false);
  useEffect(() => {
    setPageURL(window.location.href);
    if (navigator.share) {
      setNativeShare(true);
    }
  }, []);

// Now, use can use pageURL , isNativeShare in code

Answer 2

这与您的Next.js代码无关，这只是您应该调用alan-ai库的方式。

下面是适合您的解决方案。

import React, { useEffect } from "react";

const alanKey = "my key";
function App() {
useEffect(() => {
   const alanBtn = require("@alan-ai/alan-sdk-web");
   alanBtn({
   key: "myKey",
   rootEl: document.getElementById("alan-btn")
  });
}, []);

return (
 <div>
  <h1>Alan AI News Application</h1>
 </div>
 );
}
export default App;

以下是同一https://github.com/alan-ai/alan-sdk-web/issues/29#issuecomment-672242925的讨论链接。

希望这可以解决您的问题。

快乐编码。

参考错误：导航器未使用nextjs定义

2 个答案: