渲染React Redux应用程序时，Materialise Preloader栏卡住了

Question

我目前正在使用http://materializecss.com/preloader.html

中的Materialize preloader（Indeterminate类型）

所以我目前使用它的方式是：

我的redux state对象看起来像这样：

state = {
    ...
    showProgressBar: true/false
}

现在，当我点击与获取某些api对象相关联的按钮时，我会触发action showProgressBar: true以及获取项目时，reducer我创建showProgressBar: false {1}}。

这种切换效果非常好。但是，从可见到返回不可见之间的时间，preloader就会卡住。即它没有动画。

可能的原因是什么？

Answer 1

状态更新可能是异步的

  

因为this.props和this.state可以异步更新，所以不应该依赖它们的值来计算下一个状态。

this.setState((prevState, props) => ({
  showProgressBar: !prevState.showProgressBar 
}));

请参阅：docs

导入

import 'materialize-css/dist/css/materialize.min.css';  

创建组件

function Preloader() {
  return (
     <div className="progress">
       <div className="indeterminate"></div>
     </div>
  )
}

切换组件

import Preloader from '/my-components/preloader`
...
{ this.state.showProgressBar && <Preloader /> }

请参阅：working example

阵营-Materialise的

您应该使用react-materialize

  

反应的材料设计，由materializecss提供支持

import {Preloader} from 'react-materialize'

export default () => (
    <Preloader size='small'/>
)