UI 设置状态后未更新

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;

如果不将状态设置为已完成，activity 指示器仅在整个任务完成后才会出现。

Answer 1

我想到的实现它的最快方法 not-blocking 是利用 setTimeout():

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

UI 设置状态后未更新

UI not updated after setting state

setstate

reactjs