首页 > 解决方案 > 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);

我正在阅读此内容,因为正在创建的新变量 ( meor other) 不接受来自currentUseror的 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;

标签: javascriptreactjsruntime-errorchat

解决方案


以下代码有效:

        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})吗?


推荐阅读