Question

我有一个组件，里面有2个组件：

<link rel="stylesheet" type="text/css" href="assets/css/uikit.min.css">
<script src="assets/js/uikit.min.js"></script>
<script src="assets/js/uikit-icons.min.js"></script>

正在接收数据时，显示正在加载。加载完成后，它将收到类似以下内容的信息：

MyComp {
    render ( 
       html of My Comp..
       <Loading show={this.props.isLoading}/>
       <ErrorMessage show={this.props.hasError}/>  
    )
}

但是在屏幕上，加载会在hasError显示之前像2s一样关闭。

两个组件都是基于相同的策略构建的：

{
   isLoading: false,
   hasError: true
}

Answer 1

这个问题的答案并不完全，因为我不确定延迟的来源。

但是根据您的代码，我建议不要使用本地state并尝试使用sync it with external props。
这可能会导致错误（可能与您的问题有关？），因为即使没有收到新的componentWillReceiveProps，也可能会调用props，因为自从V16.2起，它就在deprecation process中。

相反，我只是直接从this.props阅读：

class Loading extends Component {

    render() {
        if (this.props.isLoading) {
          return (
            <div className="loading">
              <div className="loading-message">
              Carregando...
              </div>
            </div>);
        }
        return ('');
    }
}

同样，不确定是否与您的问题直接相关，但这是更好的做法。

React Redux：更新时组件内部内容之间的延迟

1 个答案: