javascript - 重新渲染时组件崩溃

Question

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

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

安装

它工作正常，但是当我刷新页面时，我的应用程序尝试使用尚未获取的数据，因此它崩溃了。我尝试为我的 reducer 添加加载屏幕，但这并没有成功。 这是我为它创建的 reducer :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>;
}