创建检测浏览器的React自定义Hook仅返回首字母问题排查

我正在尝试创建一个可返回用户浏览器名称的自定义Hook，这是我首次开发用于检测浏览器的自定义Hook。我在Hook内部通过state存储识别到的浏览器名称并返回该state值，本以为使用该Hook的组件可正常获取完整浏览器名称，但实际仅能返回文本的第一个字母。请问有人知道我哪里出错了吗？

自定义Hook useDetectBrowser 实现 #

import React from "react";

export default function useDetectBrowser() {
  var sBrowser, sUsrAg = navigator.userAgent;
  const [ browserName, setBrowserName ] = React.useState("");

  React.useEffect(() => {
    if (sUsrAg.indexOf("Firefox") > -1) {
      sBrowser = "Mozilla Firefox";
      // "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0"
    } else if (sUsrAg.indexOf("SamsungBrowser") > -1) {
      sBrowser = "Samsung Internet";
      // "Mozilla/5.0 (Linux; Android 9; SAMSUNG SM-G955F Build/PPR1.180610.011) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/9.4 Chrome/67.0.3396.87 Mobile Safari/537.36
    } else if (sUsrAg.indexOf("Opera") > -1 || sUsrAg.indexOf("OPR") > -1) {
      sBrowser = "Opera";
      // "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 OPR/57.0.3098.106"
    } else if (sUsrAg.indexOf("Trident") > -1) {
      sBrowser = "Microsoft Internet Explorer";
      // "Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; Zoom 3.6.0; wbx 1.0.0; rv:11.0) like Gecko"
    } else if (sUsrAg.indexOf("Edge") > -1) {
      sBrowser = "Microsoft Edge";
      // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299"
    } else if (sUsrAg.indexOf("Chrome") > -1) {
      sBrowser = "Google Chrome or Chromium";
      // "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/66.0.3359.181 Chrome/66.0.3359.181 Safari/537.36"
    } else if (sUsrAg.indexOf("Safari") > -1) {
      sBrowser = "Apple Safari";
      // "Mozilla/5.0 (iPhone; CPU iPhone OS 11_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.0 Mobile/15E148 Safari/604.1 980x1306"
    } else {
      sBrowser = "unknown";
    }
    setBrowserName(sBrowser);
  }, []);
  return browserName
}

错误调用方式 #

const [ browserName, setBrowserName ] = useDetectBrowser();
console.log(browserName);

• 问题原因：编写的useDetectBrowser钩子返回值为单个字符串类型的browserName，不是数组，调用时使用数组解构相当于对字符串进行迭代取值，仅能取到第一个字符。
• 正确调用方式：无需数组解构，直接接收返回值即可

const browserName = useDetectBrowser();

内容的提问来源于stack exchange，提问作者tkamath99