React UseEffect 不适用于 firepad 和 firebase

Posted 2023-02-22

【中文标题】React UseEffect 不适用于 firepad 和 firebase

【英文标题】：React UseEffect is not working with the firepad and firebase

【发布时间】：2022-01-10 11:43:29

【问题描述】：

我正在尝试使用来自 firebase 的用户名并在 FirepadUserList 中创建一个用户。代码是这样的

import  useRef, useEffect,useState  from 'react';
import 'codemirror/lib/codemirror.css'
import CodeMirror from 'codemirror';
import firebase from "firebase/compat";
import 'firepad/dist/firepad.css'
import classes from './Document.module.scss'
import './editor.css';
import FirepadUserList from '../../components/UserList/firepad-userlist';
import '../../components/UserList/firepad-userlist.css'
import Loading from '../../components/Loading';
import useSession from "../../firebase/AuthProvider";

type User = firebase.User | null;
type Loading = boolean;

function Editor() 

    const user, loading = useSession();
    const username = user?.displayName;
    
    const editorRef = useRef<htmlDivElement>(null);

    let userId = Math.floor((Math.random() * 10) + 1);
   
    useEffect(() => 
          
        const codeMirror = CodeMirror(editorRef.current!,  lineWrapping: true );

        window.CodeMirror = CodeMirror;

        const Firepad = require('firepad');
        const firepadRef = getExampleRef();
      
        const firepad = Firepad.fromCodeMirror(firepadRef, codeMirror,
             richTextToolbar: true, richTextShortcuts: true, userId:userId.toString());
        
            FirepadUserList.fromDiv(firepadRef.child('users'),
            document.getElementById('userlist'), userId.toString(),username);
         
        firepad.on('ready', function () 
            if (firepad.isHistoryEmpty()) 
                firepad.setHtml("<div>Start typing</div>");
            
        );
        
    , [username]);

    
    function getExampleRef() 
        let ref = firebase.database().ref();
        const hash = window.location.hash.replace(/#/g, '');
        if (hash) 
            ref = ref.child(hash);
         else 
            ref = ref.push(); // generate unique location.
            window.location.href = window.location + '#' + ref.key; 
        
        if (typeof console !== 'undefined') 
            console.log('Firebase data: ', ref.toString());
        
        return ref;
    
    return (
        <>

            <div id="userlist" className=classes.userlist></div>
            <div className=classes.editor ref=editorRef></div>


        </>
    );

export default Editor;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

但是如果我在 useEffect 中使用 username 变量，codeMirror 编辑器和 FirepadUserList 都会渲染两次，并且另一个用户在线显示，它应该只有一个

但是，如果使用字符串对用户名进行硬编码，例如 username = "Fahim Khan"，则一切正常。注意我使用的是 .tsx 扩展名。

【参考方案1】：

好的，我得到了答案。问题是获取用户名的延迟。所以 useEffect 运行了两次。如果在条件 if(username != null) 内将代码包装在 useEffect 中，则它可以正常工作