Как сделать запрос к серверу используя react hooks?

Question

[Егор Тельнов]

При рендере компонента мне нужно сделать запрос на сервер и нарисовать полученные данные. Сделать это нужно, только при первоначальной отрисовке компонента. Написал такой код:

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>
    );
};

Работает неправильно. Если перейти на другую "страницу", а потом вернуться на эту, то компонент снова делает запрос и дорисовывает в конец тот же самый результат. Как сделать это правильно?

Answer 1

[Павел Диденко]

Если вы переходите на другую страницу, то компонент размонтируется и при заходе на страницу снова монтируется, в этот момент вы посылаете запрос заново. Так что работает все правильно. Чтобы не тянуть запрос заново, вам нужно хранить в глобальном сторе предыдущий результат запроса и проверять, если данные есть - не тянуть новый запрос

Comments

[Егор Тельнов]

Понял, спасибо