重新渲染时组件崩溃

Question

我第一次通过链接导航到其他路线时可以看到我的数据：

<Link to={{ pathname: `/settings/${door._id}` }}>

Inställningar

它运行良好， 但是当我刷新页面时，我的应用程序尝试使用尚未提取的数据，因此崩溃。 我试图为我的减速器添加一个加载屏幕，但这并没有解决问题。 这是我为我的减速器创建的要点： https : //gist.github.com/Martinnord/c944f4fd22f4a4ff7e3e0b362e7d4e29

我也接触了一些论坛，他们给了我一个提示，以提示我在ReactDOM.render之前进入我的应用程序的最根本位置，在那里，连接到redux状态，并有一个名为dataIsLoading东西，或者如果dataIsLoading为true，我将显示一个正在加载的东西，如果不是，它将渲染我所有的组件。 因为否则我将遇到这个问题，其中选择器依赖于redux中的数据，并且无法控制mapStateToProps何时运行，而根本不呈现该组件。

但是问题是我完全不知道该怎么做，我已经尝试了好几个小时没有运气。 如果有人能给我任何指导或技巧，我将很幸运。 如果需要我提供更多代码，请告诉我。

谢谢阅读。

更新

从评论中得到了一个请求，所以我将添加一些代码。

mapStateToProps

const mapStateToProps = (state, ownProps, loading, fetchDoorsReducer) => {
  const door = getDoorById(state, ownProps.match.params.itemId)
  const doorId = ownProps.match.params.itemId
  const controller = getControllerById(state, door.controller)

  return {
    doors: door,
    controllers: controller,
    isLoading: state.fetchDoors.isLoading
  }
}

我如何使用isLoading ： if (this.props.isLoading) return <p>laddar</p>

Answer 1

尚不清楚您描述的哪些功能很难转换为代码。 但是，如果是这样，那么以下示例可能会对您有所帮助；

LoadingWrapper = React.createClass({
    render() {
        if (this.props.isLoading) {
            return <SomeLoadingIconHere/>;
        } else {
            return this.props.children;
        }
    }
});

然后在其他地方...

render() {
    return <LoadingWrapper isLoading={this.props.somePropertyFromRedux}>
        <SomeComponent/>
    </LoadingWrapper>;
}