无法在承诺中使用变量

Question

我正在尝试将图片上传到 Firebase 存储，这没问题。

但是，当我尝试使用图像 URL 和从表单获取的其他一些内容来设置状态时，我的变量（部分和价格）在承诺中为空。在我的代码下面：

    handleForm = e =>{
    e.preventDefault();

    const {section, price, image} = e.target

    const file = image.files[0]
    const pictureName = userInformation.name.replace(/ /g, "_");
    if(file.size <= 1000000){
      const myRoute = '/img/userPictures/' + pictureName;
      const storageRef = firebase.storage().ref(myRoute);
      const task = storageRef.put(file);
      task.on('state_changed', snapshot =>{
        console.log('Uploaded');
      }, error =>{
        console.log(error.message)
      }, () =>{
        task.snapshot.ref.getDownloadURL().then(downloadURL =>{
          this.setState({
            information: this.state.data.concat([{
              section: section.value, 
              price: price.value, 
              image:downloadURL}])
          })
        });
      })
      e.currentTarget.reset();
      this.notifySuccess('Information uploaded');
    }else{
      this.notifyError('Image should be less than 1 MB')
    }
    }

我的错误在哪里？谢谢！

Answer 1

这是因为您在回调之外使用了e.currentTarget.reset()。 尝试将其放入回调成功后，它应该可以按预期工作 （如下图）

handleForm = e => {
    e.preventDefault()

    const {section, price, image} = e.target

    const file = image.files[0]
    const pictureName = userInformation.name.replace(/ /g, '_')
    if (file.size <= 1000000) {
        const myRoute = '/img/userPictures/' + pictureName
        const storageRef = firebase.storage().ref(myRoute)
        const task = storageRef.put(file)
        task.on(
            'state_changed',
            snapshot => {
                console.log('Uploaded')
            },
            error => {
                console.log(error.message)
            },
            () => {
                task.snapshot.ref.getDownloadURL().then(downloadURL => {
                    this.setState({
                        information: this.state.data.concat([
                            {
                                section: section.value,
                                price: price.value,
                                image: downloadURL
                            }
                        ])
                    })
                })
                e.currentTarget.reset()
                this.notifySuccess('Information uploaded')
            }
        )
    } else {
        this.notifyError('Image should be less than 1 MB')
    }
}