![](/img/trans.png)
[英]TypeError: Cannot assign to read only property '' of object '#<Object>' Redux Tool Kit Slice for Firebase Storage REACT NATIVE
[英]firebase: Cannot assign to read only property 'displayName' of object '#<Object>'
我在我的 ReactJS 项目上使用@reduxjs/toolkit: ^1.7.1
、 firebase: 9.6.1
和 firebase firebase-tools: 10.0.1
。 我试图创建一个 function 用户可以在其中更新他们的姓名和头像照片。
为此,我使用了updateProfile()
function。 但是,每当我执行更新 function 时,它都会引发错误Cannot assign to read only property 'displayName' of object '#<Object>'
。
我注意到一件有趣的事情是,如果我只更新 photoURL 属性,它仍然Cannot assign to read only property 'displayName' of object '#<Object>'
代码: useFirebase.js
:
import { getAuth, signInWithPopup, GoogleAuthProvider, createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut, onAuthStateChanged, updateProfile } from 'firebase/auth'; import { getDownloadURL, getStorage, ref, uploadBytes } from 'firebase/storage'; import { useEffect, useState } from 'react'; import { useDispatch } from 'react-redux'; import { useLocation, useNavigate } from 'react-router-dom'; import { setIsLoading } from '../features/isloadingSlice'; import { login, logout } from '../features/userSlice'; import initAuth from '../Firebase/initAuth'; initAuth(); export const useFirebase = () => { const auth = getAuth(); const location = useLocation(); const navigate = useNavigate(); const dispatch = useDispatch(); const [updateCount, setUpdateCount] = useState(0); const storage = getStorage(); const Redirect = () => { console.log(location); const destination = location?.state?.from?.pathname || '/'; navigate(destination); } const uploadAvatar = async (file) => { const fileRef = ref(storage, 'avatar/' + auth?.currentUser?.uid + '.png'); dispatch(setIsLoading(true)); const snapshot = await uploadBytes(fileRef, file); const photoURL = await getDownloadURL(fileRef); updateProfile(auth.currentUser, { photoURL }).then(() => { setUpdateCount(updateCount + 1); }).catch(e => console.log(e.message)) dispatch(setIsLoading(false)); console.log(snapshot); } const userRegister = (name, photoURL, email, password) => { dispatch(setIsLoading(true)); createUserWithEmailAndPassword(auth, email, password).then(result => { updateProfile(auth.currentUser, { displayName: name, photoURL }).then(() => { }) dispatch(login({ displayName: name, email, photoURL })); Redirect(); }).catch(error => alert(error.message)).finally(() => dispatch(setIsLoading(false))) } useEffect(() => { const unsubscribe = onAuthStateChanged(auth, (result) => { if (result) { dispatch(login({...result })) } else { dispatch(login({})) } dispatch(setIsLoading(false)); }) return () => unsubscribe; }, [updateCount, auth]) return { logIn, logOut, Redirect, uploadAvatar, userRegister, } }
我不知道这个displayName
属性有什么问题,但我以前的项目工作正常。
有人可以帮我吗?
我有 2 个不同的项目使用 firebase 的身份验证,两者都使用 firebase firebase/auth
的updateProfile()
。 其中一个工作正常,但另一个使用@reduxjs/toolkit: ^1.8.4
的问题与您的问题相同,所以我相信它与reduxjs/toolkit
。 但是,function 确实有效,数据已在服务器端(firebase)更新。 所以就我而言,我只是忽略它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.