javascript - ComponentDidMount完成后渲染

Question

我正在尝试将 fileList 值更新为上传组件。但是，handleOne 函数始终显示 []。从控制台中，我可以看到 handleOne 函数在 getFirebaseURL 函数之前执行。有没有办法让我等到 componentDidMount 完成所有 setState 方法，然后渲染页面？我尝试使用 componentWillMount() 和 shouldUpdate()，它们都不起作用。谁能帮我？非常感谢!

handleOne = () => {
  console.log(this.state.data)
}

componentDidMount() {
  axios.get('/user/product')
    .then(res=>{
      if(res.data.code==0) {
        this.setState({data:res.data.data}, function(){
          for(i = 0; i < 10; i++) {
             // this getURL function also contains setState
             this.getFirebaseURL(this.state.data[i].productName) 
          }
        })
      }
    })
}


render(){
  <Upload fileList= {this.handleOne()}>
  </Upload>
}

已更新

 getFirebaseURL = product => {
   // Get all the images from the firebase
    var storage = firebase.storage();
    var that = this;
    var i = 0;
    const storageRef =  storage.ref(`image/${product}`)

    // Get all the URL
    storageRef.listAll().then(function(result) {
      result.items.forEach(function(imageRef) {
        imageRef.getDownloadURL().then(function(url) {  

              i = i + 1;
              let object = {}
              object['uid'] = i.toString();
              object['name'] = product;
              object['url'] = url;

              let list = []
              list.push(object)
              // temp3 is an array        
              that.state.temp3.push(list)
            }).catch(function(error) {});        
         })
       })          
    }

Answer 1

使用如下条件渲染:

render(){
  {this.state.data && <Upload fileList= {this.handleOne()}> }
  </Upload>
}