Повторное использование постоянной базы огня в освещенном элементе

Question

В компоненте с освещенным элементом я учусь писать в документ Firebase.

Я установил ссылку на базу данных как константу конструктора (docRef) ... потому что это выглядело как хорошее место. Однако я не могу вызвать его из метода writeToDb (). В приведенном ниже коде все работает, но вы можете видеть, что я повторил refDoc (= refDoc2).

Я пробовал "this.refDoc", но я получаю ошибку: не могу прочитать свойство 'set' из undefined. Как вы делаете что-то подобное в этом случае?

Спасибо за любую помощь!

import { LitElement, html } from 'lit-element'
import { store } from '../redux/store'

import { firestore } from '../database/config'
import firebase from 'firebase/app'

import { connect } from 'pwa-helpers'

class ReduxFirebase extends connect(store)(LitElement) {    
  constructor(){
    super()
    const docRef = firestore.doc("samples/sandwichData")
    docRef.set({
      hotDogStatus: "not a sandwich!"
    })

  }

  render() {
    return html`
      <button @click="${this.writeToDb}">Change Status</button>
    `
  }

  writeToDb() {
    const docRef2 = firestore.doc("samples/sandwichData")
    docRef2.set({
      hotDogStatus: "may be a sandwich"
    })
  }
}

customElements.define('redux-firebase', ReduxFirebase)

Answer 1

Вы определяете docRef в constructor, поэтому вы можете получить к нему доступ только в constructor.

  constructor(){
    super()
    const docRef = firestore.doc("samples/sandwichData")
    docRef.set({
      hotDogStatus: "not a sandwich!"
    })

  }

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

Пример использования свойства.Это зависит от нового стандарта JS .

class ReduxFirebase extends connect(store)(LitElement) {   
  docRef = firestore.doc("samples/sandwichData")

  constructor(){
    super()
    this.docRef.set({
      hotDogStatus: "not a sandwich!"
    })

  }

  render() {
    return html`
      <button @click="${this.writeToDb}">Change Status</button>
    `
  }

  writeToDb() {
    this.docRef.set({
      hotDogStatus: "may be a sandwich"
    })
  }
}

Пример использования геттера.

class ReduxFirebase extends connect(store)(LitElement) {   
  constructor(){
    super()
    this.docRef.set({
      hotDogStatus: "not a sandwich!"
    })

  }

  get docRef() {
    return firestore.doc("samples/sandwichData")
  }

  render() {
    return html`
      <button @click="${this.writeToDb}">Change Status</button>
    `
  }

  writeToDb() {
    this.docRef.set({
      hotDogStatus: "may be a sandwich"
    })
  }
}

Пример настройки this.

class ReduxFirebase extends connect(store)(LitElement) {   
  constructor(){
    super()
    this.docRef = firestore.doc("samples/sandwichData")
    this.docRef.set({
      hotDogStatus: "not a sandwich!"
    })

  }

  render() {
    return html`
      <button @click="${this.writeToDb}">Change Status</button>
    `
  }

  writeToDb() {
    this.docRef.set({
      hotDogStatus: "may be a sandwich"
    })
  }
}

Обратите внимание, что вам нужно убедиться, что firestore.doc("samples/sandwichData") не выполняет кучу работы до того, как это потребуется, и определить ее на соответствующей стадии жизненного цикла компонента .

Answer 2

Возможно, вам нужно объявить ваше свойство , если вы собираетесь инициализировать его из конструктора.

 static get properties() {    return { docRef: { type: Object } };  }