Question

我有新的反应。我正在尝试将文件上传到Firebase，虽然它很顺利，但我似乎无法将图片网址保存到pictureUrl状态。我正在从承诺中提取url，并且它工作正常，但是如何将promiseUrl从promise转换为pictureUrl状态？有什么想法吗？

数据提交

      handleSubmit(e){
          e.preventDefault();
          console.log(this.state.picture)

          this.props.uploadImage(this.state.picture)

        const article = {
          header: this.state.header,
          tagLine: this.state.tagLine,
          articleType: this.state.articleType,
          system: this.state.system,
          body: this.state.body,
          pictureUrl: ???????
      }

      this.props.saveArticle(article);

      console.log('Data saved!')  

      // Resets the state back to nothing
        this.setState({
          header: '',
          tagLine: '',
          articleType: '',
          system: '',
          body: '',
          pictureUrl: ''
        })
      }

Firebase呼叫上传文件

           export function saveArticle(article, file){
                return dispatch => database.push(article);
            }

            export function uploadImage(picture){
                    return dispatch => storage.child('/images/' + picture.name).put(picture).then((snapshot) => {


                        snapshot.ref.getDownloadURL().then(function(downloadURL) { 

                        console.log('File available at: ', downloadURL)
                        })
                    })

                    console.log(picture)

            }

Answer 1

您必须先将其置于状态，然后才能将该状态回叫。我也是新来的人，以前我也有类似的问题。也许您应该看一下这个例子。

您必须回调变量。

例如

render{
return{
<PDF
 file={this.state.pdfUrl}
  />
 }
}

https://medium.com/@650egor/react-30-day-challenge-day-4-firebase-photo-upload-delete-f7c59d73ae36

Loading images from Firebase Realtime Database + Storage

React Redux Firebase文件上传

1 个答案: