React виснет при попытке подключить компоненту
Почему-то при попытке подключить данную компоненту react просто виснет, не выдавая никакую ошибку:
import React, { useState, useEffect } from 'react';
import { useHttp } from '../../hooks/http.hooks';
import _ from 'lodash';
import profileImg from '../../img/system/profile/profileImg.svg';
function ProfileLink() {
const { request } = useHttp(); // Для получения данных
const [profile, setProfile] = useState({});
const profileID = JSON.parse(localStorage.getItem('user')).id;
function takeProfileLink() {
const userID = JSON.parse(localStorage.getItem('user')).id;
setProfile({
...profile,
link: `profile/${userID}`
});
}
async function takeProfile() {
const data = await request(`http://localhost:5500/api/auth/get/${profileID}`);
setProfile({
...profile,
picture: _.get(data, 'profile.picture', 'https://i.pinimg.com/originals/0c/3b/3a/0c3b3adb1a7530892e55ef36d3be6cb8.png'),
name: _.get(data, 'profile.name', '')
});
}
async function takeProfilePicture() {
if (profile.picture) {
return `http://localhost:5500/api/upload/image_get/${profile.picture}`;
} else {
return profileImg;
}
}
async function standProfilePicture() {
const link = await takeProfilePicture();
setProfile({
...profile,
pictureLink: link
});
}
useEffect(async() => {
await takeProfile();
takeProfileLink();
}, []);
standProfilePicture();
return (
<a href={profile.link} className="profile-link">
<div className="profile-name">
{profile.name}
</div>
<div className="profile-picture">
<img src={profile.pictureLink} alt="profile picture"/>
</div>
</a>
);
}
export default ProfileLink;
Предположительно проблема связана с объектом profile. Раньше все было расфасовано по переменным и все работало, а сейчас переменные заменил на объект и react просто перестал грузиться.
Ответы (1 шт):
Автор решения: Armen
→ Ссылка
ты обновляешь компоненту компонента рендерится и снова запускает эту функцию
- +к этому при установке state используй такой синтексис с твоим могут быть проблемы
`
setProfile((prev) => {
return {
...prev,
pictureLink: link
}
})
`
standProfilePicture(); //вот тут проблема рекурсии