永远不会到达我的函数调用 - ReactJs 0.12.0

Never reaching my function call - ReactJs 0.12.0

我有一个 jsbin,除了一些失败的 show down get 请求外,它没有抛出任何控制台错误。除此之外,具体到我的代码没有错误,但它从未达到特定点。

The following Jsbin 有问题。该代码适用于所有意图和目的,但并非同时有效。如果您查看:

请注意 据我所知,以下是有效的 reactjs 代码。

/**
 * A component to display the individual post.
 */
var DisplayPosts = React.createClass({
  render: function() {
    if (this.props.posts === null) {
      return (<div></div>);
    }

    var markDown = new Showdown.converter();

    var post = this.props.posts.slice(0, 4).map(function(post) {
      var content = markDown.makeHtml(post.content)
      return (
        <div>
          <div className="single-post" key={post.id}>
            <h3><a href={"http://writer.aisisplatform.com/blog#post/" + post.title}>{post.title}</a></h3>
            <span dangerouslySetInnerHTML={{__html: content.split(/\s+/).slice(0, 40).join(' ') + '...'}} />
            <hr />
            <div className="float-right">
              <i className="fa fa-comments"></i> {post.comments.length}
            </div>
          </div>
        </div>
      );
    });

    return (
      <div>{post}</div>
    )
  }
});

然后在 this.props.posts.slice(0, 4).map(function(post) { 中放置一个 console.log,你将永远无法到达那里。把一个放在一边,你就可以到达那里。在街区后放置一个,您就可以到达那里。把一个放在里面——你永远到不了那里。

这是怎么回事?

当在 [] 上调用 Array.slice() 时,它 returns []。然后,当在 [] 上调用 Array.map 时,它永远不会调用迭代器函数。

所以看起来 this.props.posts 在这种情况下是一个空数组。