Javascript 如何修复未处理的拒绝（TypeError）：chat.setUser不是React.js中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;

import React，{Component}来自“React”；
从“../../firebase”导入{FirebaseContext}”；
从“firechat”导入*作为FirechatUI；
类PublicChat扩展组件{
静态contextType=FirebaseContext；
建造师（道具）{
超级（道具）；
};
componentDidMount（）{
var elem=document.getElementById（“firechat包装器”）；
var chatRef=this.context.database.ref（）；
var chat=新的FirechatUI（chatRef，elem）；
this.context.auth.onAuthStateChanged（函数（用户）{
如果（用户）{
setUser（user.uid，user.displayName）；
} 
});
}
render（）{
返回(
);
}
}
导出默认PublicChat；

从“firechat”导入*作为FirechatUI；

这个导入看起来不正确？没有

。/

表示您正在导入npm库。根据您的文件夹结构，它可能类似于“

”../firechat“

”。

从“firechat”导入*为FirechatUI；

---

这个导入看起来不正确？没有

。/

表示您正在导入npm库。根据您的文件夹结构，它可能类似于“

”../firechat“

。

我找到了解决方案，因为我在index.html中使用了全局firechat CDN库，我需要在componentDidMount中使用它

//eslint禁用下一行no undef

需要从“firechat”中删除

import*作为FirechatUI

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);
            } 
        });
    }

我找到了解决方案，因为我在index.html中使用了全局Firechat CDN库，我需要在componentDidMount中使用它

//eslint禁用下一行no undef

需要从“firechat”中删除
import*作为FirechatUI

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);
            } 
        });
    }

我贴出了答案。看看这个，我贴了一个答案。看看这个。