карточки добавляются в конец списка, а после перезагрузки появляются в начале списка

Question

При добавлении карточки она добавляется только после перезагрузки страницы, хотя аналогичным способом делаю изменение данных пользователя на странице, они меняются сразу, без перезагрузки.

Вот как реализовано изменение данных пользователя (они меняются без перезагрузки)

_checkResponse(response) {
    if (response.ok) {
      return response.json();
    };
    return Promise.reject(`Ошибка: ${response.status}`);
  };

changeUserData(userName, userAbout) {
    return fetch (this._baseUrl + '/users/me', {
      method: 'PATCH',
      headers: this._headers,
      body: JSON.stringify({
        name: userName,
        about: userAbout
      }),
    })
    .then(this._checkResponse);
  };

export default class UserInfo {
  constructor (nameSelector, aboutSelector, avatarSelector) {
    this._nameSelector = document.querySelector(nameSelector);
    this._aboutSelector = document.querySelector(aboutSelector);
    this._avatarSelector = document.querySelector(avatarSelector)
  };

  getUserInfo() {
    return {
      name: this._nameSelector.textContent,
      about: this._aboutSelector.textContent,
      avatar: this._avatarSelector.src
    };
  };

  setUserInfo(userData) {
   this._nameSelector.textContent = userData.name;
   this._aboutSelector.textContent = userData.about;
   this._avatarSelector.src = userData.avatar;
  };
};

/* Создание данных профиля */
const userInfo = new UserInfo (
  '.profile__title', 
  '.profile__subtitle', 
  '.profile__avatar'
);

/* ФОРМА ПРОФИЛЯ */  

/* Хендлер отправки формы */
const handleFormEditSubmit = (newInputValues) => {
  api.changeUserData(newInputValues['input-name'], newInputValues['input-about'])
    .then((userData) => {
    userInfo.setUserInfo(userData)
  })
    .catch((err) => {
      console.log(err);
    });
};

Но кода по такой же логике добавляю новую карточку на страницу, то она появляется уже только после перезагрузки страницы

export default class Card {
  constructor ({cardData, handleLikeCard, handleCardClick, handleDeleteCard}, userId, templateSelector) {
    this._name = cardData.name;
    this._link = cardData.link;
    this._likes = cardData.likes;
    this._cardId = cardData._id;
    this._ownerId = cardData.owner._id;
    this._handleLikeCard = handleLikeCard;
    this._userId = userId
    this._templateSelector = templateSelector;
    this._handleCardClick = handleCardClick;
    this._handleDeleteCard = handleDeleteCard;
  };
/* Клонирование разметки карточки */
  _getElement() {
    const cardElement = document
      .querySelector(this._templateSelector).content
      .querySelector('.cards__card').cloneNode(true);
    return cardElement
  }
/* Наполнение разметки карточки */
  generate() {
    this._element = this._getElement();
    this._element.querySelector('.cards__title').textContent = this._name;
    this._cardImage = this._element.querySelector('.cards__pic');
    this._cardImage.src = this._link;
    this._cardImage.alt = this._name;
    this._deleteButton = this._element.querySelector('.cards__delete');
    this._likeButton = this._element.querySelector('.cards__like-button');
    this.updateDeleteButtonView();
    this.updateLikesView();
    this._setEventListeners();
    return this._element;
  };
/* Получение ID карточки */
  id() {
    return this._cardId;
  };
/* Проверка на наличие лайка пользователя */
  isLiked() {
    return Boolean (this._likes.find(userData => userData._id === this._userId))
  };
/* Изменение состояния лайка, в зависимости от наличия лайка пользователя */
  updateLikesView() {
    if (this.isLiked()) {
      this._likeButton.classList.add('cards__like-button_active');
    } else {
      this._likeButton.classList.remove('cards__like-button_active');
    };
    this._updateLikes();
  };

/* Актуализация количества лайков */
  _updateLikes() {
    this._element.querySelector('.cards__like-counter').textContent = this._likes.length;
  };

/* Проверка принадлежности карточки к пользователю */
  isCardOfUser() {
    return Boolean (this._cardId.find(cardData => cardData.owner_id === this._userId))
  };

/* Изменение состояния кнопки удаления карточки */
  updateDeleteButtonView() {
    if (this.isCardOfUser) {
      this._deleteButton.classList.add('cards__delete_inactive');
    } else {
      this._deleteButton.classList.remove('cards__delete_inactive');
    };
  };

/* Удаление карточки из разметки и из оперативной памяти */
  remove() {
    this._element.remove();
    this._element = null;
  };
/* Установка слушателей */
  _setEventListeners() {
    this._cardImage.addEventListener('click', () => {
      this._handleCardClick(this._link, this._name)
    });
    this._deleteButton.addEventListener('click', () => {
      this._handleDeleteCard(this)
    });
    this._likeButton.addEventListener('click', () => {
      this._handleLikeCard(this)
    });
  }
}

addNewCard(cardName, cardLink) {
    return fetch (this._baseUrl + '/cards', {
      method: 'POST',
      headers: this._headers,
      body: JSON.stringify({
        name: cardName,
        link: cardLink
      }),
    })
    .then(this._checkResponse);
  };

/* ФОРМА ДОБАВЛЕНИЯ КАРТОЧКИ */ 

/* Хендлер отправки формы */
const handleFormAddSubmit = (newInputValues) => {
  api.addNewCard(newInputValues['input-place'], newInputValues['input-link'])
    .then((cardData) => {
      cardSection.addItem(createCard(cardData))
    })
    .catch((err) => {
      console.log(err);
    });
};

Answer 1

решил иначе, создал отдельный метод для отрисовки изначальных карточек и отдельный метод для добавления новых

export default class Section {
  constructor ({ renderer }, containerSelector) {
    this._renderer = renderer;
    this._container = document.querySelector(containerSelector);
  };

  addInitialCards(element) {
    this._container.append(element);
  }

  addItem(element) {
    this._container.prepend(element);
  };

  renderItems (items) {
    items.forEach(item => this._renderer(item))
  };
};

/* ФОРМА ДОБАВЛЕНИЯ КАРТОЧКИ */ 

/* Хендлер отправки формы */
const handleFormAddSubmit = (newInputValues) => {
  api.addNewCard(newInputValues['input-place'], newInputValues['input-link'])
    .then((cardData) => {
      cardSection.addItem(createCard(cardData))
    })
    .catch((err) => {
      console.log(err);
    });
};

/* Рендеринг карточек */
const cardSection = new Section({
  renderer: (cardData) => {
    cardSection.addInitialCards(createCard(cardData));
  }
}, '.cards');

/* Вывод данных пользователя и карточек на тсраницу*/
const getInfo = Promise.all([api.getUserData(), api.getCards()])
  .then(([userData, cardData]) => {
    userInfo.setUserInfo(userData);
    userId = userData._id;
    cardSection.renderItems(cardData);
  })
  .catch((err) => {
    console.log(err);
  });

БЛОГ НА HUSL

карточки добавляются в конец списка, а после перезагрузки появляются в начале списка

Ответы (1 шт):