Question

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

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

Inställningar

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

我也联系了一些论坛，他们给了我一个提示，在ReactDOM.render之前找到我应用程序的根目录，并在那里，连接到redux状态，并有一个名为dataIsLoading的东西，如果dataIsLoading为真，我将显示一个加载的东西，如果它不是它渲染我的所有组件。因为否则我会遇到这个问题，其中选择器依赖于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>;
}

重新渲染时组件崩溃

更新

mapStateToProps

1 个答案: