Firebase не загружает значение на снимок

Question

У меня есть это приложение React. Когда я создаю объект book / WIP, я хочу перенаправить на страницу книги. Он может нормально загружать свойства книги, но когда я пытаюсь загрузить свойства автора книги, это не так. Но если я перейду на страницу этой книги из другого места на веб-сайте, свойства автора книги загрузятся нормально. Только после того, как я создаю книгу, свойства автора не загружаются.

Вот, что я думаю, соответствующий код:

NewWipForm.js

render() {
    if (this.state.redirect === true) {
      return <Redirect to= {{pathname: '/wip/' + this.state.wipId}} />
    }

    <form className="center-form" 
          onSubmit={(event) => this.createWIP(event)} 
          ref={(form) => this.WIPForm = form}
    >
    </form>
}



createWIP(event) {
    event.preventDefault()
      const WIPsRef = firebaseDB.database().ref('WIPs');
      const WIP = {
        title: this.state.title,
        writer: this.state.userId,
        wc: this.state.wordCount,
        logline: this.state.logline,
        draft: this.state.draft,
        language: this.state.language,
        disclaimers: this.state.disclaimers,
        improvementAreas: this.state.improvementAreas,
        blurb: this.state.blurb,
        additionalNotes: this.state.additionalNotes,
        genres: this.state.genres.split(","),
        types: this.state.types.split(","),
        creationDate: Date.now()
      }
      var newWIPRef = WIPsRef.push(WIP);
      var WIPId = newWIPRef.key;
      this.setState({wipId: WIPId});
    this.addWIPToUser(WIPId)
    this.addOrUpdateWIPIndexRecord(WIPId)
    this.WIPForm.reset()
    this.setState({ redirect: true })
  }

WIP.js

componentWillMount() {
    this.WIPRef.on('value', snapshot => {
      let WIP = snapshot.val()
      if (WIP) {
        this.setState({
          title: WIP.title ? WIP.title : "",
          wordCount: WIP.wc ? WIP.wc : "",
          logline: WIP.logline ? WIP.logline : "",
          draft: WIP.draft ? WIP.draft : "",
          language: WIP.language ? WIP.language : "",
          disclaimers: WIP.disclaimers ? WIP.disclaimers : "",
          improvementAreas: WIP.improvementAreas ? WIP.improvementAreas : "",
          blurb: WIP.blurb ? WIP.blurb : "",
          additionalNotes: WIP.additionalNotes ? WIP.additionalNotes : "",
          writer: WIP.writer ? WIP.writer : "",
          genres: WIP.genres ? WIP.genres : [],
          types: WIP.types ? WIP.types : []
        });
        var promises = []
        var writerRef = firebaseDB.database().ref(`/Users/${WIP.writer}`)
        promises.push(writerRef.once('value')); 
        Promise.all(promises).then((snapshots) => {
          snapshots.forEach((snapshot) => {
            var writer = snapshot.val()
            this.setState({
              writerName: writer.displayName ? writer.displayName : ""
            })
          })
        })
      }
    })
  }

поэтому здесь, в componentWillMount, то, что находится внутри блока Promise.all(promises).then((snapshots) => {, никогда не выполняется после создания WIP (книги).

Мне кажется, что-то не так с моим UsersRef. Но похоже, что я выключаю его в нужных местах?

Вот еще код, если вы думаете, что что-то не так в другом месте:

NewWipForm.js WIP.js

Answer 1

Мне нужно было установить моего писателя в обратном вызове для setState.

Новый код:

  componentDidMount() {
    this.loadData(this.state.wipId)
  }

  loadData(wipId) {
    this.WIPRef = firebaseDB.database().ref(`WIPs/${wipId}`);
    this.WIPRef.on('value', snapshot => {
      let WIP = snapshot.val()
      if (WIP) {
        this.setState({
          title: WIP.title ? WIP.title : "",
          wordCount: WIP.wc ? WIP.wc : "",
          logline: WIP.logline ? WIP.logline : "",
          draft: WIP.draft ? WIP.draft : "",
          language: WIP.language ? WIP.language : "",
          disclaimers: WIP.disclaimers ? WIP.disclaimers : "",
          improvementAreas: WIP.improvementAreas ? WIP.improvementAreas : "",
          blurb: WIP.blurb ? WIP.blurb : "",
          additionalNotes: WIP.additionalNotes ? WIP.additionalNotes : "",
          writer: WIP.writer ? WIP.writer : "",
          genres: WIP.genres ? WIP.genres : [],
          types: WIP.types ? WIP.types : []
        }, 
        () => {
          this.getWriterData(this.state.writer)
          .then((snapshots) =>
            snapshots.forEach((snapshot) => {
              var writer = snapshot.val()
              this.setState({
                writerName: writer.displayName ? writer.displayName : ""
              })
            })
          )
        });
      }
  }

  getWriterData(writer) {
    var promises = []
    this.writerRef = firebaseDB.database().ref(`/Users/${writer}`)
    promises.push(this.writerRef.once('value')); 
    return Promise.all(promises)
  }