Question

我在只有一个嵌套子项中从我的React应用程序状态检索和显示信息时遇到了一个非常有趣的问题。

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

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

我的组件如下所示：

＆＃13;

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)

＆＃13;

我的错误是：

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之前我需要等到信息可用。然而，当我将日志扔进其他组件时，我注意到了相同的行为;多个日志，前一个或两个未定义，其余包含所需信息，然后正确加载所有组件。

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

我已经把手指关闭了，尝试导入有用的图书馆，尝试使用承诺，尝试在此之前实现我所能做的一切。

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

Answer 1

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

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

在React子组件中异步检索状态时遇到问题

1 个答案: