设置状态后 UI 未更新答案

【问题标题】：UI not updated after setting state设置状态后 UI 未更新
【发布时间】：2019-06-25 14:41:12
【问题描述】：

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

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

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;

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

【问题讨论】：

您可能在控制台中遇到错误。看到那个问题：stackoverflow.com/q/31045716/863110
更新了代码，复制到错误的编辑器@MoshFeu
您缺少任务代码，这并不难 - 任务完成后设置状态。由于缺少该代码，因此我只能说。您也不需要在开始任务之前等待状态更改。
这对我来说仍然没有意义，如果您的任务太快以至于动画没有时间运行，那么问题出在哪里？为什么要人为地减慢您的任务以显示动画？无论如何，这是您的用户体验！
我又不确定你到底要什么时候隐藏动画？

标签： reactjs setstate

【解决方案1】：

我想到的让它不阻塞的最快方法是利用setTimeout()：

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

【讨论】：

这可能有效，但它不是很“反应式”的方式。
@alexr89 会是什么？
@alexr89 有很多方法可以制作非阻塞代码。这在反应中也是完全合法的。
setTimeout 很容易出错，如果返回需要 1 毫秒怎么办 - 让用户坐 1000 次是不好的。如果返回需要 2000 怎么办 - 你会得到错误的结果？在我看来，您应该有一个“正在加载”状态值，在挂载时将其设置为 false，然后在调用 Test 时设置为 true。虽然“正在加载”为 true，但有一个微调器或一些 UI 指示它正在加载，然后在测试中设置“buttonState”时再次将“loading”设置为 false。如果您愿意，很高兴编写代码答案。
@alexr89 对于非阻塞函数也可以使用 0ms，这是避免 JS 中阻塞函数的最常见模式。你不明白这段代码的含义。干杯。