我正在从Cloudinary获取用户头像，并将其保存在React组件的localStorage中。
Welcome to Setting Sync但是，当用户注销时，我有一个运行import React, { useState, useEffect } from 'react';
import { getUserAvatar } from '../../utils/index';
var initialState = {
avatar: '/static/uploads/profile-avatars/placeholder.jpg'
};
var UserContext = React.createContext();
function setLocalStorage(key, value) {
try {
window.localStorage.setItem(key, JSON.stringify(value));
} catch (errors) {
// catch possible errors:
console.log(errors);
}
}
function getLocalStorage(key, initialValue) {
try {
const value = window.localStorage.getItem(key);
return value ? JSON.parse(value) : initialValue;
} catch (e) {
// if error, return initial value
return initialValue;
}
}
function UserProvider({ children }) {
const [user, setUser] = useState(() => getLocalStorage('user', initialState));
const [isAvatarUploading, setIsAvatarUploading] = useState(true);
console.log('user ', user);
useEffect(() => {
setLocalStorage('user', user);
}, [user]);
useEffect(() => {
getUserAvatar()
.then(userAvatar => {
setIsAvatarUploading(false);
setUser(user => ({ ...user, avatar: userAvatar }));
})
.catch(err => console.log('error thrown from getUserAvatar', err));
}, [user.id]);
return (
<UserContext.Provider
value={{
userId: user.id,
userAvatar: user.avatar,
userImages: user.images,
setUserId: id => setUser({ ...user, id }),
setUserAvatar: avatar => setUser({ ...user, avatar }),
setUserImages: images => setUser({ ...user, images }),
isAvatarUploading: isAvatarUploading
}}
>
{children}
</UserContext.Provider>
);
}
export default UserContext;
export { UserProvider };
的函数，从外观上看，它会清除localStorage。
但这是我的情况；新用户登录后加载个人资料页面时，您会短暂看到旧头像图片的闪烁。循环是否应该重新开始，即上述功能像我们从头开始一样运行？