LitElement с данными из Firestore - PullRequest
Новая
       54

LitElement с данными из Firestore

0 голосов
/ 06 мая 2020

Я пытался динамически вставлять данные из Firestore в свой компонент.

В настоящее время я использую жизненный цикл firstUpdated(). Мой код работает, но похоже, что есть способ лучше.

Это мой текущий компонент. 

static get properties() {
  return {  
     firebaseData: {type:Object},
    }
}
constructor() {
  super()
  this.firebaseData = {}
}

firstUpdated() {
  firestore.doc(`...`).get()
  .then(doc => {this.firebaseData = doc.data()})
  })
  .catch(err => console.error(err))
}
render() {
  return html `${firebaseData.title}`
}

Я надеялся, что кто-то с большим опытом будет готов поделиться своими знаниями. Заранее спасибо!

1 Ответ

0 голосов
/ 06 мая 2020

firstUpdated следует использовать, когда вам нужно взаимодействовать с теневыми элементами DOM внутри вашего веб-компонента, поскольку до этого момента они не создаются. Это самый ранний момент, когда вы можете быть уверены, что ваш компонент DOM существует.

Я бы предпочел выполнить вызов firebase раньше, даже в конструкторе.

Идея в том, что ваш firebase вызов не зависит от рендеринга, поэтому вы можете сделать это напрямую в самый ранний момент, и, как и в обратном вызове функции, которую вы обновляете в свойстве firebaseData, тогда будет выполнен новый цикл рендеринга.

...