javascript - User.id 的 TalkJS 错误:[TalkJS] 用户:未给出必填字段“id”或不是字符串或数字
问题描述
使用 TalkJS 构建 React 聊天应用程序。下面是我的“我的网络”页面,其中包含大部分逻辑。
我有一个包含姓名、电子邮件、描述和生成随机 ID 的登录表单。我将此信息存储在本地存储中并在 Network.js 中检索。当我单击用户开始聊天时,我在控制台中收到以下错误:
index.js:1 Error: [TalkJS] User: required field "id" is not given or not a string or a number.
它似乎发生在这行代码中:
const me = new Talk.User({currentUser});
const other = new Talk.User(user);
console.log(me);
console.log(other);
我正在阅读此内容,因为正在创建的新变量 ( me
or other
) 不接受来自currentUser
or的 id 字段user
?
网络.js
import React from 'react';
import { dummyUsers } from './Users.js';
import Talk from 'talkjs';
class Network extends React.Component{
constructor(props){
super(props);
let currentUser;
const currentStoredUser = localStorage.getItem("currentStoredUser");
if (currentStoredUser) {
currentUser = JSON.parse(currentStoredUser)
}
this.state = {
currentUser
}
}
handleClick(userId) {
/* Get both users */
const { currentUser } = this.state;
const user = dummyUsers.find(user => user.id === userId);
console.log(currentUser);
console.log(user);
/* Create talk session */
Talk.ready.then(() => {
const me = new Talk.User({currentUser});
const other = new Talk.User(user);
console.log(me);
console.log(other);
if(window.talkSession) {
window.talkSession = new Talk.Session({
appId: "twBRxQzL",
me: me
});
}
const conversationId = Talk.oneOnOneId(me, other);
const conversation = window.talkSession.getOrCreateConversation(conversationId);
conversation.setParticipant(me);
conversation.setParticipant(other);
this.chatbox = window.talkSession.createChatBox(conversation);
this.chatbox.mount(this.container);
console.log(me);
console.log(other);
})
.catch(e => console.error(e));
}
render(){
const { currentUser } = this.state;
return(
<div>
<div className="list-group w-25">
{dummyUsers.map(user => {
return(
<button onClick={(userId) => this.handleClick(user.id)} className="list-group-item list-group-item-action flex-column align-items-start ">
<div className="d-flex w-100 justify-content-between">
<img src={user.photoUrl} alt="User" height="42" width ="42"/>
<h5 className="mb-1">{user.name}</h5>
</div>
<p className="mb-1">{user.email}</p>
<p className="mb-1">{user.description}</p>
</button>
)
})}
</div>
<div className="chatbox-container" ref={c => this.container = c}>
<div id="talkjs-container" style={{height: "300px"}}><i></i></div>
</div>
</div>
)
}
}
export default Network;
解决方案
以下代码有效:
Talk.ready.then(() => {
const me = new Talk.User({
id: currentUser.id,
name: currentUser.name,
email: currentUser.email,
description: currentUser.description,
photoUrl: currentUser.photoUrl
});
const other = new Talk.User(user);
有人愿意解释为什么需要这样做而我不能通过Talk.User({currentUser})
吗?
推荐阅读
- azure-data-explorer - 在 Kusto 中调试摄取失败
- java - 如何使用 openssl 命令验证 Logjam 问题?
- javascript - 如何添加自定义样式
- android - 应用程序的私人文件夹不会出现在图库中
- python - 如何获取不包含在 .content 中的 HTML 标记中的文本?
- jquery - 两个输入元素在焦点事件上返回相同的 ID
- ios - PDFTron 更改箭头注释方向 iOS
- java - 如何在 Java 中建模 PDDL 案例
- access-token - 获取 Myob AccountRight API 访问令牌错误
- angular - 从源“http://localhost:4200”访问“http://site.local/api/v1/profiles”的 XMLHttpRequest 已被 CORS 策略阻止: