永远不会到达我的函数调用 - 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
在这种情况下是一个空数组。
我有一个 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
在这种情况下是一个空数组。