Javascript 使用BroadcastChannel API响应获取错误

我正在使用sessionStorage保存身份验证信息，需要将此信息复制到正在打开的其他选项卡。我已经创建了一个用于重新创建该问题的。我没有在这篇文章中包含代码，因为它相当长

在另一个窗口中打开仪表板链接时，由于弹出错误，因此不会呈现该链接

编辑： 我已经在下面列出了所有必要的代码

App.js

导出默认函数App（）{
返回(
);
}

Dashboard.js

导出默认值（道具）=>{
const[isLogged，setIsLogged]=useState（false）；
const[email，setEmail]=useState（）；
const[token，setToken]=useState（）；
const authconnel=新广播频道（“auth”）；
useffect（（）=>{
setToken（sessionStorage.getItem（“token”）；
setEmail（sessionStorage.getItem（“电子邮件”）；
setIsLogged（sessionStorage.getItem（“令牌”）？true:false）；
authChannel.postMessage（{action:“created”，source:“Dashboard”}）；
}, []);
useffect（（）=>{
authChannel.onmessage=函数（e）{
如果(
e、 data.action==“登录”&&
（e.data.target==“*”|| e.data.target===“仪表板”）
) {
setIsLogged（真）；
setEmail（例如data.data.user.email）；
setToken（即data.data.token）；
sessionStorage.setItem（“email”，例如data.data.user.email）；
setItem（“token”，即data.data.token）；
}
};
}，[authChannel]）；
返回(
仪表板
{isLogged&&您已登录}
{！已登录&&请登录}
);
};

Home.js

authChannel.postMessage({
  action: "login",
  target: e.data.source,
  data: { user: user, token: token } //--> user and token are undefined
});

import React，{useState，useffect}来自“React”；
导出默认值（道具）=>{
const[isLogged，setIsLogged]=useState（false）；
const[email，setEmail]=useState（）；
const[token，setToken]=useState（）；
const[user，setUser]=useState（）；
const authconnel=新广播频道（“auth”）；
useffect（（）=>{
setToken（sessionStorage.getItem（“token”）；
setEmail（sessionStorage.getItem（“电子邮件”）；
setIsLogged（sessionStorage.getItem（“令牌”）？true:false）；
}, []);
useffect（（）=>{
authChannel.onmessage=函数（e）{
如果(
e、 data.action==“登录”&&
（e.data.target==“*”|| e.data.target===“主页”）
) {
setIsLogged（真）；
setEmail（例如data.data.user.email）；
setToken（即data.data.token）；
setUser（例如data.data.user）；
sessionStorage.setItem（“email”，例如data.data.user.email）；
setItem（“token”，即data.data.token）；
}else if（如data.action==“已创建”）{
authChannel.postMessage({
操作：“登录”，
目标：e.data.source，
数据：{用户：用户，令牌：令牌}
});
}
};
}，[authChannel]）；
常量注销=（）=>{
setIsLogged（假）；
setToken（空）；
setUser（{}）；
setEmail（）；
sessionStorage.removietem（“电子邮件”）；
sessionStorage.removietem（“令牌”）；
};
返回(

{isLogged&&(


logout（）}>注销
)}
{！isloged&&(

请

)}

);
};

Login.js

import React，{useState，useffect}来自“React”；
导出默认值（道具）=>{
const[isLogged，setIsLogged]=useState（false）；
const[token，setToken]=useState（）；
const[email，setEmail]=useState（）；
const[user，setUser]=useState（{}）；
const authconnel=新广播频道（“auth”）；
const[input，setInput]=useState({
电子邮件：“superadmin@a.com",
密码：“quantum”
});
useffect（（）=>{
authChannel.onmessage=函数（e）{
如果（例如，data.action==“注销”）{
setIsLogged（假）；
setToken（）；
setUser（{}）；
}
};
}，[authChannel]）；
useffect（（）=>{
setToken（sessionStorage.getItem（“token”）；
setEmail（sessionStorage.getItem（“电子邮件”）；
setIsLogged（sessionStorage.getItem（“令牌”）？true:false）；
}, []);
常量handleLogin=（）=>{
//在这里处理登录。。。
authChannel.postMessage({
操作：“登录”，
目标：“*”，
数据：{
用户：{电子邮件：a@a.com" },
令牌：“KJDHLFJKGDJGDLFHJLDHJGH76LGJ”
}
});
setIsLogged（真）；
};
常量handleInputChange=（e，源）=>{
setInput（{…输入，[源]：e.target.value}）；
};
返回(
{！isloged&&(
电子邮件
handleInputChange（e，“电子邮件”）}
/>
密码
handleInputChange（即“密码”）}
/>
handleLogin（）}>登录
)}
{isLogged&&您现在已登录}
);
};

---

请务必告诉我这可能是什么原因。

您收到一个错误，因为您正在此处发送未定义的数据：

Home.js

authChannel.postMessage({
  action: "login",
  target: e.data.source,
  data: { user: user, token: token } //--> user and token are undefined
});

此外，我建议您更改此行：

 const authChannel = new BroadcastChannel("auth");

因为每次渲染组件时，都会创建一个新的

BroadcastChannel

实例。为了避免这种情况，您需要将

BroadcastChannel

实例存储在

useRef

中：

  const authChannelRef = useRef(new BroadcastChannel("auth"));
  const authChannel = authChannelRef.current;

---

我建议您添加部分代码和您遇到的错误。如果您在safari中运行代码，BroadcastChannel不起作用，您可以在这里找到一些答案@lissettdm我正在使用chrome，如果我能在chrome中运行它就好了。感谢您的回复，我将按照您所说的进行尝试并更新。欢迎您；）

authChannel.postMessage({
  action: "login",
  target: e.data.source,
  data: { user: user, token: token } //--> user and token are undefined
});

 const authChannel = new BroadcastChannel("auth");

  const authChannelRef = useRef(new BroadcastChannel("auth"));
  const authChannel = authChannelRef.current;