时间戳

首页 > 解决方案 > 使用 firebase 数据库和反应钩子设置和更新表单输入

reactjs - 使用 firebase 数据库和反应钩子设置和更新表单输入

问题描述

在我的应用程序中，我有一个带有表格的个人资料部分。当组件挂载时，我想从 firebase 获取用户数据，并以用户配置文件的当前值将其显示在表单中。使用“值”道具或“占位符”道具。

当用户在表单输入中进行更改并提交更改时，我希望数据库更新并使用新数据更新表单。

目前我可以让数据库值出现在表单输入字段中，或者我可以让表单输入字段为空，但更新数据库。但不是两者兼而有之。以下代码使数据库数据呈现在表单输入中，但无法更改。

我知道它可能与第二个 useEffect() 和 getUserData() 函数有关，我似乎无法弄清楚。

const UserEdit = (props) => {
    const [currentUser, setCurrentUser] =  useState('');
    const [forening, setForening] = useState('');

    useEffect(() => {
        firebase_app.auth().onAuthStateChanged(setCurrentUser);
    }, [])

    const getUserData =  async () => {
        await dbRef.ref('/' + currentUser.uid + '/profil/' ).once('value', snapshot => {
        const value =  snapshot.val();
        setForening(value)
        })
    }

    useEffect(() => {
        getUserData()
    },[] )

    const handleInput = (event) => {
        setForening(event.target.value) 
        
    }

    const updateUserData = () => {
        dbRef.ref('/' + currentUser.uid + '/profil/' ).set({foreningsnavn: forening}, function(error)  {
            if(error) {
                console.log("update failed")
            } else {
                alert(forening)  
            }
        })
    }

    const handleClick = () => {
        updateUserData()
    }

    return (
        <>
            <div className="card-body">
                <div className="row">
                    <div className="col-md-5">
                        <div className="form-group">
                            <label className="form-label">{Forening}</label>
                            <input className="form-control" type="text"  value={forening} onChange={handleInput}/>
                        </div>
                    </div>
                </div>
            </div>
        </>
    )

}

标签： reactjsformsfirebasefirebase-realtime-databasereact-hooks

解决方案

您的第二个 useEffect 将只运行一次，因为依赖项的第二个参数数组 [] 为空：

useEffect(() => {
        getUserData()
    },[] )

您可以添加外部依赖项以使 useEffect 通过输入更改运行

useEffect(() => {
        getUserData()
    },[foreign] )

或者您可以使用轮询来同步数据库状态

推荐阅读