개체 '#'의 읽기 전용 속성 'displayName'에 할당할 수 없습니다.
3498 단어 firebasereduxreactjavascript
@reduxjs/toolkit: 1.7.1
, firebase: 9.6.1
및 firebase-tools: 10.0.1
를 사용하고 있습니다. 사용자가 자신의 이름과 아바타 사진을 업데이트할 수 있는 기능을 만들려고 했습니다.updateProfile()
기능을 사용했습니다. 하지만 업데이트 기능을 실행할 때마다 오류가 발생했습니다Cannot assign to read only property 'displayName' of object '#<Object>'
.흥미로운 점은 photoURL 속성만 업데이트해도 여전히 제공된다는 것입니다
Cannot assign to read only property 'displayName' of object '#<Object>'
.Project_Link_Github
코드:
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 { 로그인, 로그아웃 } from '../features/userSlice';
'../Firebase/initAuth'에서 initAuth 가져오기;
초기화인증();
내보내기 const useFirebase = () => {
const auth = getAuth();
const 위치 = useLocation();
const 탐색 = useNavigate();
const 디스패치 = useDispatch();
const [updateCount, setUpdateCount] = useState(0);
const 저장소 = getStorage();
const 리디렉션 = () => {
console.log(위치);
const destination = location?.state?.from?.pathname || '/';
탐색(목적지);
}
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
속성에 어떤 문제가 있는지 모르겠지만 이전 프로젝트는 잘 작동합니다.아무도 저를 도와 주시겠습니까?
Reference
이 문제에 관하여(개체 '#'의 읽기 전용 속성 'displayName'에 할당할 수 없습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/mdibuhossain/cannot-assign-to-read-only-property-displayname-of-object--2gkl텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)