Пользовательский интерфейс не обновляется после установки состояния - PullRequest
Новая
       1

Пользовательский интерфейс не обновляется после установки состояния

2 голосов
/ 25 июня 2019

Я выполняю задачи, выполнение которых занимает несколько секунд, и я пытаюсь показать анимированный индикатор прогресса. При попытке установить состояние для обновления индикатора, он обновляется только после завершения задачи.

Я пытался использовать обратные вызовы для достижения этой цели, но, похоже, это не работает. 

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;

Если состояние не установлено как завершенное, индикатор активности появляется только после того, как вся задача уже выполнена.

Ответы [ 2 ]

1 голос
/ 25 июня 2019

Самый быстрый способ, который приходит мне в голову, чтобы сделать его не блокирующим, - это воспользоваться setTimeout(): 

function Test(param) {
    setTimeout((param) => { /* ...code */ }, 1000);
}
0 голосов
/ 25 июня 2019

Я бы передал обратный вызов вашему 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'}
  })
}
...