При рендере компонента мне нужно сделать запрос на сервер и нарисовать полученные данные. Сделать это нужно, только при первоначальной отрисовке компонента. Написал такой код:
const Users = props => {
useEffect(() => {
axios
.get('https://social-network.samuraijs.com/api/1.0/users')
.then(response => {
props.setUsers(response.data.items)
})
}, []);
return (
<div className="">
{props.users.map(user => (
<div className="" key={user.id}>
<div className="">
<img src={user.img} alt="" />
{user.followed === true ? (
<button onClick={() => props.unfollow(user.id)}>
Отписаться
</button>
) : (
<button onClick={() => props.follow(user.id)}>
Подписаться
</button>
)}
</div>
<div className="">
<div className="">
<p>{user.name + " " + user.lastname}</p>
<p>{user.status}</p>
</div>
<div className="">
<p>{user.location.country}</p>
<p>{user.location.city}</p>
</div>
</div>
</div>
))}
</div>
);
};
Работает неправильно. Если перейти на другую "страницу", а потом вернуться на эту, то компонент снова делает запрос и дорисовывает в конец тот же самый результат. Как сделать это правильно?
