0

我有一个非常有趣的问题，从我的 React 应用程序的状态中检索和显示信息，只有一个嵌套的孩子。

我正在尝试做的类似于这个react-router tutorial for recursive paths。我有一个管理员路由，它将用户带到用户可以编辑的嵌套部分。我成功地将道具传递给每个组件，呈现应用程序状态中保存的信息，直到达到某个点。

我的网址是：/admin/label/posts/edit/:post

我的组件如下所示：

import React from 'react'
import { withRouter } from 'react-router-dom'

const EditingPost = props => {
  const index = props.match.params.post
  const post = props.posts[index]
  return(
    <div>
      {post.title}
    </div>
  )
}

export default withRouter(EditingPost)

我的错误是：

TypeError: Cannot read property 'title' of undefined
EditingPost
src/pages/Admin/Label/EditingPost.js:9
   6 |   const post = props.posts[index]
   7 |   return(
   8 |     <div>
>  9 |       {post.title}
  10 |     </div>
  11 |   )
  12 | }

但是，当我console.log(post)应用程序抛出 5 个日志时，前 2 个是undefined，接下来的 3 个包含我正在寻找的正确信息。我的想法是，在呈现组件的 html 之前，我需要等到信息可用。然而，当我将日志放入其他组件时，我注意到了同样的行为。多个日志，前一个或两个是undefined，其余的包含所需的信息，然后所有组件都正确加载。

我无法理解的是为什么我在使用这个特定组件时遇到问题。我知道我需要的信息正在通过，但由于某种原因，我无法像往常一样使用它。

我已经用谷歌搜索了我的手指，尝试导入有用的库，尝试使用承诺，尝试在此处询问之前实现我所能做的一切。

任何帮助或建议表示赞赏！我希望这一切对某人有意义。

4

1 回答 1

0

我将对您的功能进行以下更改：

const EditingPost = props => {
  const index = props.match.params.post
  const post = props.posts[index];
  const title = post ? post.title : '';
  return(
    <div>
      {title}
    </div>
  )
}
于 2017-11-01T15:27:28.360 回答