React集成TalkJS实现聊天按官方步骤操作不生效问题求助

你的代码存在3个会直接导致功能失效的问题，逐一修复即可正常运行：

• 未导入useEffect钩子：代码中仅从React引入了useRef，实际用到的useEffect没有导入，运行时会直接抛出未定义错误。
• DOM绑定的ref初始值错误：用于承接TalkJS聊天容器的ref初始值传入了字符串'root'，正确初始值应为null，否则inbox.mount()无法获取到真实的DOM节点，聊天界面无法渲染。
• 缺少组件卸载清理逻辑：React默认开启的严格模式会在开发环境下重复执行两次useEffect，如果不在副作用返回函数中销毁已创建的TalkJS实例，会出现重复创建会话、重复挂载组件、内存泄漏等问题，直接导致功能异常。

修正后完整代码 #

import { useRef, useEffect } from 'react';
import Talk from 'talkjs';

const UserChat = () => {
  const talkjsContainer = useRef(null);

  useEffect(() => {
    let inbox = null;
    let session = null;

    Talk.ready.then(() => {
      const me = new Talk.User({
        id: '123456',
        name: 'Alberto',
        email: 'alice@example.com',
        photoUrl: 'https://demo.talkjs.com/img/alice.jpg',
        welcomeMessage: 'Hey there! How are you? :-)',
      });

      session = new Talk.Session({
        appId: 'tUOOCMxO',
        me: me,
      });
      window.talkSession = session;

      const other = new Talk.User({
        id: '654321',
        name: 'Sebastian',
        email: 'Sebastian@example.com',
        photoUrl: 'https://demo.talkjs.com/img/sebastian.jpg',
        welcomeMessage: 'Hey, how can I help?',
        role: 'default',
      });
    
      const conversation = session.getOrCreateConversation(
        Talk.oneOnOneId(me, other)
      );
    
      conversation.setParticipant(me);
      conversation.setParticipant(other);

      inbox = session.createInbox();
      inbox.select(conversation);
      if (talkjsContainer.current) {
        inbox.mount(talkjsContainer.current);
      }
    });

    // 组件卸载时清理资源
    return () => {
      inbox?.destroy();
      session?.destroy();
      window.talkSession = null;
    };
  }, []);

  return <div ref={talkjsContainer} style={{ height: '600px' }}></div>;
}

export default UserChat;

补充说明：聊天容器需要明确设置高度，默认div高度为0也会导致看起来“没有渲染”的问题，代码中给容器加了固定高度，你可以根据业务场景自行调整。

内容的提问来源于stack exchange，提问作者Alberto José Giuseppe Rojas