개체 '#'의 읽기 전용 속성 'displayName'에 할당할 수 없습니다.

내 ReactJS 프로젝트에서 @reduxjs/toolkit: 1.7.1 , firebase: 9.6.1firebase-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 속성에 어떤 문제가 있는지 모르겠지만 이전 프로젝트는 잘 작동합니다.

아무도 저를 도와 주시겠습니까?

좋은 웹페이지 즐겨찾기