Question

我正在执行一项需要花费几秒钟才能完成的任务，并试图显示动画进度指示器。尝试设置状态以更新指示器时，仅在任务完成后才更新。

我尝试使用回调来完成此操作，但是它似乎不起作用。

import React, { Component } from 'react'
import { Lion as Button } from 'react-button-loaders'

class xx extends Component {
  constructor(props){
  super(props)
  this.state = {
    buttonState: ''
  }

this.handleClick = this.handleClick.bind(this)
}

Test(){
  // Do task that takes some time
  this.setState({buttonState: 'finished'} // End animation
}

handleClick() {
  this.setState({buttonState: 'loading'},
  () => {
    this.Test()
  })
}
  render() {
    return (
      <div>
        <Button onClick={this.handleClick} state={this.state.buttonState}>Test
        </Button>
      </div>
    );
  }
}

export default xx;

在不将状态设置为完成的情况下，活动指示器仅在整个任务已经完成之后出现。

Answer 1

我想让它成为非阻塞状态的最快方法是利用setTimeout()：

function Test(param) {
    setTimeout((param) => { /* ...code */ }, 1000);
}

Answer 2

我会将回调传递给您的Test方法，一旦完成Test-调用该回调以设置状态。

这里的想法是让Test通知组件其进度。

Test(done){
  // Do task that takes some time

  if(done && typeof done === 'function') {
   done();
  }
}

handleClick() {
  this.setState({buttonState: 'loading'}

  this.Test(()=> {
    this.setState({buttonState: 'done'}
  })
}

设置状态后，UI未更新

2 个答案: