reactjs - 如何删除之前在 React useEffect() 中创建的实例

Question

这是我的 useEffect()。我正在使用 React 和艾伦语音识别制作网站。这个 useEffect() 所做的是，当有人进入该国家/地区时，它会创建一个基本上是一个按钮的 alanBtn。现在的问题是，当用户选择另一个国家/地区时，前一个按钮会停留在页面上，并在其顶部创建一个新按钮. 我想要做的是，每当用户选择一个不同的国家时，它都会破坏前一个按钮实例，然后创建一个新的。

useEffect(() => {
    alanbtn({
      key: alanKey,
      onCommand: ({ command, articles, number }) => {
        if (command === "newHeadlines") {
          setNewsArticles(articles);
          setActiveArticle(-1);
        } else if (command === "highlight") {
          setActiveArticle((prevValue) => prevValue + 1);
        } else if (command === "open") {
          const parseNumber =
            number.length > 2
              ? wordsToNumbers(number, { fuzzy: true })
              : number;

          const article = articles[parseNumber - 1];
          if (parseNumber > 20) {
            alanbtn().playText("Please try that again");
          } else if (article) {
            window.open(article.url, "_blank");
            alanbtn().playText("Opening...");
          }
        }
      },
    }).setVisualState({ answer: country });
  }, [country]);

国家作为道具传递给这个组件。

标签： reactjsreact-hooksalan