无法读取属性＆＃39;道具＆＃39;未定义的（React）

Question

我有一个反应组件有条件地呈现内容，但它有点冗长和重复。我试图将重复的代码包装在一个函数中，然后我再调用它（输出依赖于我赋予函数的任何参数），但这不起作用。

原始（详细）解决方案：

render() {

  const userId = parseInt(this.props.params.userId)
  const {posts} = this.props

  if(userId) {
     const postsForUser = posts.filter( post => post.userId === userId )
     return (
        <div>
           {postsForUser.map( post =>
              <Post {...this.props} post={post} key={post.id} />
           )}
        </div>
     )
  }
  else {
     return (
        <div>
           {this.props.posts.map( post =>
              <Post {...this.props} post={post} key={post.id} />
           )}
        </div>
     )
  }

} // end render()

（不成功）尝试将其修剪

render() {

  const userId = parseInt(this.props.params.userId)

  function renderPostList(postsInput) {
     return (
        <div>
           {postsInput.map( post =>
              <Post {...this.props} post={post} key={post.id} />
           )}
        </div>
     )
  }

  if (userId) {
     const postsForUser = this.props.posts.filter( post => post.userId === userId )
     return renderPostList(postsForUser)
  }
  else {
     return renderPostList(this.props.posts)
  }

}

我收到错误：Cannot read property 'props' of undefined

我知道这个问题与函数的范围有关，以及this如何引用错误的这个（或者在这种情况下什么都没有）但是我很难理解如何解决这个。如果有人能够在这个例子中特别解释出了什么问题，我会非常感激。

Answer 1

您应该可以通过将renderPostList方法移出render方法并进入类级别来实现此目的。

renderPostList = (postsInput) => (
  <div>
    {postsInput.map( post =>
      <Post {...this.props} post={post} key={post.id} />          
    )}
  </div>
)

render() {

  const userId = parseInt(this.props.params.userId)

  if (userId) {
     const postsForUser = this.props.posts.filter( post => post.userId === userId )
     return this.renderPostList(postsForUser)
  }
  else {
     return this.renderPostList(this.props.posts)
  }

}

Answer 2

您应该将函数renderPostList绑定到this以使用props值。尝试以下解决方案：

  var renderPostList = function(postsInput) {
     return (
        <div>
           {postsInput.map( post =>
              <Post {...this.props} post={post} key={post.id} />
           )}
        </div>
     )
  };
  renderPostList.bind(this);