Question

我有这个React应用。创建本书/ 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（book）之后永远不会执行。

我觉得我的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)
  }

Firebase不会在快照上加载值

1 个答案: