在页面刷新错误上反应路由器 dom - 无法读取未定义的属性？答案

【问题标题】：React router dom on page refresh error - cannot read property of undefined?在页面刷新错误上反应路由器 dom - 无法读取未定义的属性？
【发布时间】：2018-05-10 15:04:08
【问题描述】：

我正在开发 react redux firebase 应用程序。 Inm App.js 我得到了所有带有标题和正文的帖子。我将标题设为可点击的链接，并将密钥作为参数传递（参见下面的代码）。

当我点击它时，我会进入 PostDetails 页面。一切正常。帖子处于状态（我可以在 redux devtools、控制台日志等中看到）。

但是，当我刷新页面时，我收到错误消息：TypeError：无法读取未定义的属性“标题”

任何帮助都将受到高度评价。我正在使用 react-router-dom 进行路由。谢谢！

index.js - 路由：

<BrowserRouter>
    <Switch>
        <Route path="/:id" component={PostDetail} />
        <Route exact path="/" component={App} />
    </Switch>
</BrowserRouter>

App.js - 将帖子标题作为可点击链接的组件：

renderPosts() {
    return _.map(this.props.posts, (post, key) => {
      return (
        <div key={key}>
          <Link to={`/${key}`}>
            <h3 className="card-title">{post.title}</h3>
          </Link>
          <p>{post.body}</p>
          <button onClick={() => this.props.deletePost(key)}>Delete</button>
        </div>
      );
    });
  }
  render(){
    return (
        {this.renderPosts()}
    )
  }
  export default withRouter(connect(mapStateToProps, { getPosts, savePost, deletePost })(App));

PostDetail - 显示完整帖子的组件：

class PostDetail extends Component {
    render() {
        const { post } = this.props;
        console.log(post);
        return (
            <div>
                <Link to={'/'}>Go Home</Link>
                <div>
                    <h1>{post.title}</h1>
                    <p>{post.body}</p>
                </div>
            </div>
        );
    }
}
function mapStateToProps(state, ownProps) {
    return { post: state.posts[ownProps.match.params.id] };
}
export default withRouter(connect(mapStateToProps)(PostDetail));

【问题讨论】：

您能否验证您是否在 mapStateToProps 函数中获得了ownProps.match.params.id
当我在 PostDetail 组件中控制台记录 this.props.post 时。我只得到标题和正文，没有参数。 {body: "by mozilla", title: "JavaScript"}
我可以很好地到达帖子详细信息页面。刷新页面后，出现错误..
一旦你刷新页面，你的 Redux 状态就会丢失，因此你会得到那个错误
所以当你刷新时，你可能会调用一个 API 来重新填充你的 redux 状态 post，这需要一段时间，在它可用之前，在渲染中你使用 post.title 会引发错误，所以如果您在刷新后获取帖子详细信息，那么您可能需要在使用 post.title 和类似的其他键之前添加条件检查

标签： reactjs redux undefined page-refresh react-router-dom

【解决方案1】：

这将由post?.title 解决，它将首先等待发布的数据。它替代条件渲染

【讨论】：

请解释一下这有什么影响
嗯，它会先等待post中的数据。它替代条件渲染