Javascript 显示错误无法读取属性'；拆分'；在microsoft edge中为空，但在chrome上运行良好

我正在制作一个react应用程序

我已在localStorage上存储用户名：

userName=Super Admin

在这里，我需要取名字的第一个字母和第二个名字的第一个字母来显示在个人资料部分，如：

SA

所以我先把它拆分，然后取子字符串得到名字的第一个字母

在chrome上工作正常，但当我切换到edge时，显示错误：

TypeError: Cannot read property 'split' of null

这是我的密码：

class TopNavbar extends Component {
  state = {};
  render() {
    var user = localStorage.getItem("userName");
    console.log(user) //Super Admin 
    var components = user.split(" ");
    let firstNameLetter = components[0].substring(0, 1);
    let secondNameLetter = components[1].substring(0, 1);
    console.log(firstNameLetter)   //S
    console.log(secondNameLetter ) //A
    return (
      <>
        <Nav>
          <NavbarContainer>
            <NavLogoSection>
              <LogoText>FIX-BRIX</LogoText>
            </NavLogoSection>
              <UserNameSection>
                <UserNameText>
                  {firstNameLetter}
                  {secondNameLetter}
                </UserNameText>
              </UserNameSection>
          </NavbarContainer>
        </Nav>
      </>
    );
  }
}

export default TopNavbar;

类TopNavbar扩展组件{
状态={}；
render（）{
var user=localStorage.getItem（“用户名”）；
console.log（用户）//超级管理员
var components=user.split（“”）；
设firstNameLetter=components[0]。子字符串（0，1）；
设secondNameLetter=components[1]。子字符串（0，1）；
console.log（firstNameLetter）//S
console.log（secondNameLetter）//A
返回(
固定锤度
{firstNameLetter}
{secondNameLetter}
);
}
}
导出默认TopNavbar；

注意：

它在谷歌chrome上运行良好，只在微软edge上显示错误

---

任何建议都会很有帮助

您可能还没有在Microsoft Edge的localstorage中使用用户名。您不能假设-在尝试

.split（）

之前，您需要检查用户名是否存在

考虑：

让firstNameLetter；
让第二封信；
如果（用户）{
var components=user.split（“”）；
firstNameLetter=组件[0]。子字符串（0,1）；
secondNameLetter=组件[1]。子字符串（0,1）；
}

您可能在localstorage中没有该项？如何在单个登录中为两个浏览器使用localstorage？您需要手动将其添加到localstorage中，或者我不知道用户登录时如何将itI添加到localstorage中。在这里，我没有在边缘登录。所以localStorage中没有任何项感谢@DominikMatis指出我的错误将其包装在if语句中检查localStorage是否已设置，如果已设置，则读取if not then。。。