无法读取未定义的属性 'props' (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()

（不成功）尝试trim它下来

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 是如何引用错误的 this（或在本例中什么都没有），但我很难弄清楚如何解决这个问题。如果有人能解释一下在这种情况下具体出了什么问题，我将不胜感激。

Answer 1

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

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

Answer 2

您应该可以通过将 renderPostList 方法从 render 方法中移出并移至 class 级别来完成此操作。

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)
  }

}

无法读取未定义的属性 'props' (React)

Cannot read property 'props' of undefined (React)

render

dry

function

reactjs

原始（详细）解决方案：

（不成功）尝试trim它下来

无法读取未定义的 属性 'props' (React)

Cannot read property 'props' of undefined (React)

render

dry

function

reactjs

原始（详细）解决方案：

（不成功）尝试trim它下来

无法读取未定义的属性 'props' (React)