Javascript 如何使用react显示firebase上传的图像？

大家好！ 我开始学习react，我想创建一个简单的上传表单。因此，我正在将图像上载到firebase存储，我希望在它们完成上载后显示它们，到目前为止，我已设法将它们上载到firebase存储，但它们没有显示在页面上。我做错了什么？这是我在用户单击上载按钮时用于处理事件的方法：

handleOnChange(event){
const file= event.target.files[0];
const storageRef = firebase.storage().ref(`fotos/${file.name}`);
const task = storageRef.put(file);
task.on('state_changed', (snapshot) => {
      let percentage = (snapshot.bytesTransferred / snapshot.totalBytes) * 100
      this.setState({
        uploadStatus: percentage,
      }),
      (error) => {
      console.error(error.message)
    },
    this.setState({
        picture:task.snapshot.downloadURL
    })
      console.log(task.snapshot.downloadURL)

    })
  }

这就是组件返回的内容

return (
      <div>
      <progress value={this.state.uploadStatus} max="100">
        {this.state.uploadStatus}%
      </progress>

      <input type='file' onChange={this.handleOnChange.bind(this)}/>
      <div id='gallery'>

        < img src={this.state.picture}/>

      </div>
      </div>
    );

返回(
{this.state.uploadStatus}%

);

两者都在同一个组件上

---

谢谢你的帮助

在如何向方法上的

传递参数时，似乎存在语法问题。应该是这样的

task.on(
  "state_changed",
  snapshot => {
    let percentage = snapshot.bytesTransferred / snapshot.totalBytes * 100;
    this.setState({ uploadStatus: percentage });
  },
  error => {
    console.error(error.message);
  },
  () => {
    this.setState({ picture: task.snapshot.downloadURL });
    console.log(task.snapshot.downloadURL);
  }
);

如果在一个arrow函数中需要多个语句，应该用括号将它们括起来