如何修复未处理的拒绝(TypeError)：chat.setUser不是React.js中Firebase的Firechat的函数

Question

我试图通过使用以下方法制作一个聊天应用程序 Firebase的Firechat

我得到了这个错误。

Unhandled Rejection (TypeError): chat.setUser is not a function

以下是代码

import React, { Component } from "react";
import { FirebaseContext } from "../../firebase";
import * as FirechatUI from 'firechat';

class PublicChat extends Component {
    static contextType = FirebaseContext;

    constructor(props) {
        super(props);

    };

    componentDidMount() {

        var elem = document.getElementById("firechat-wrapper");

        var chatRef = this.context.database.ref();

        var chat = new FirechatUI(chatRef, elem);

        this.context.auth.onAuthStateChanged(function(user) {
        if (user) {
            chat.setUser(user.uid, user.displayName);
            } 
        });
    }


    render() {
        return (
            <>
            <div id="firechat-wrapper"></div>
            </>
        );
    }
}

export default PublicChat;

..........................................................................................................................

Answer 1

import * as FirechatUI from 'firechat';

这个导入看起来不正确？如果没有 ../ 意味着你正在导入一个npm库。它可能应该是类似于 '../firechat' 取决于你的文件夹结构...

Answer 2

我找到了解决办法，因为我在index.html中使用的是Global Firechat CDN库，我需要在componentDidMount中使用。

// eslint-disable-next-line no-undef

并需要去除 import * as FirechatUI from 'firechat';

componentDidMount() {

        var self = this;
        var elem = document.getElementById("firechat-wrapper");

        var chatRef = this.context.database.ref();
        // eslint-disable-next-line no-undef
        this.chat = new FirechatUI(chatRef, elem);

        console.log(this.chat);

        this.context.auth.onAuthStateChanged(function(user) {
        if (user) {
            self.chat.setUser(user.uid, user.displayName);
            } 
        });
    }