以同步方式集成两个React功能

时间:2018-07-30 20:48:35

标签: reactjs asynchronous synchronous

我下面有React代码。我想以同步方式将handleUpdate集成到handleUpload函数中,以便在执行其余函数之前设置状态。我在下面尝试了以下操作,并用粗体显示了我的编辑,但是它似乎正在异步执行,并且在执行之前未设置状态。有人可以告诉我我需要进行更改以满足我的需求吗?

handleUpdate = event => {
   this.setState({
     selectedFile: event.target.files[0]
   })
}

handleUpload = () => {
  **this.handleFileChange;**
  var fd = new FormData();
  fd.append('file', this.state.selectedFile, this.state.selectedFile.name);
  fetch('/upload', {method: 'POST', body: fd})
      .then(response => {
          return response.json()})
      .then(result => {
           console.log(result)})
      .catch(function(error) {           
          console.log("ERROR:" + error);
      });
}

1 个答案:

答案 0 :(得分:1)

$('.btn').click(function() {
   $('#contentLeft div').hide();
   $('#contentRight div').hide();
   var target = '#' + $(this).data('target')
   target = target.split(',');
   $(target[0]).show();
   $('#' + target[1]).show();
})

您可以在setState的回调函数中调用handleUpload函数,以确保仅在state.selectedFile设置后才调用handleUpload函数