[英]Array of react elements not rendering in the render()
I am learning react through creating some sample projects using Meteor. 我正在学习通过使用Meteor创建一些示例项目来做出反应。 I think I am getting a grasp of it but now I am stuck again.
我想我已经掌握了,但是现在我又被卡住了。
I am using a twitter API to fetch the most recent 3 tweets from the BOINGBOING twitter page. 我正在使用Twitter API从BOINGBOING Twitter页面获取最新的3条Tweet。 I can confirm that I have the API working and can console out an array of objects containing
created_at
, text
, & value.entities.media[0].media_url
which is basically the image url of a tweet. 我可以确认我可以使用API,并且可以安慰出包含
created_at
, text
和value.entities.media[0].media_url
的对象数组,该对象基本上是tweet的图像URL。
What I am trying to achieve is to display the three tweets within a div
tag containing an img
& 2 p
tags. 我想要实现的是在包含
img
&2 p
标签的div
标签中显示三个tweet。
I am forming the DOM with JSX, pushing the DOM for current tweet into an array and then passing this array to render(). 我正在用JSX形成DOM,将当前推文的DOM推入数组,然后将此数组传递给render()。 I thinking an array of React elements should render right?
我认为一组React元素应该渲染正确吗? So what is my mistake, I am seeing nothing?
那我的错是什么,我什么都没看见?
getTweets: function(){
Meteor.call('fetchTweets', function(error, result){
var res = [];
// cycle through the results and build reat elements
_.each(result, function(value, key, list){
var {created_at, text, ...other} = value;
if (value.entities.media != undefined) {
// no image
let node = (
<div>
<p>{created_at}</p>
<p>{text}</p>
</div>
);
console.log(node);
res.push(node);
} else {
// has image
let node = (
<div>
<img src={value.entities.media[0].media_url} alt=""/>
<p>{created_at}</p>
<p>{text}</p>
</div>
);
res.push(node);
}
})
console.log(res);
return res;
});
},
render: function() {
return (
<div>
<div className="alltweets">{this.getTweets()}</div>
</div>
);
}
When I console out my react elements, this is what I see. 当我调出我的反应元素时,这就是我所看到的。
I don't know meteor, but it looks like Meteor.call
is asynchronous, so it can't just return res
. 我不知道流星,但它看起来像
Meteor.call
是异步的,因此它不能只返回res
。 You'd probably need to call setState({ someKey: res })
in your asyncCallback , and use that state in your render()
call. 您可能需要在
setState({ someKey: res })
调用setState({ someKey: res })
,并在render()
调用中使用该状态。
I'm not sure you're using react correctly in this situation, here's how I'd do it. 我不确定在这种情况下您使用的反应是否正确,这就是我的处理方法。
const TweetList = React.createClass({
getInitialState() {
const tweets = Meteor.call('fetchTweets', function(error, result){
return result;
}
return {
tweets: tweets
}
},
render() {
const {tweets} = this.state;
{data.map(this._renderTweets)}
},
_renderTweets(tweet, ii) {
if (!tweet.entities.media) {
return(
<div key={ii}>
<p>{tweet.created_at}</p>
<p>{tweet.text}</p>
</div>
);
}
else {
return(
<div key={ii}>
<img src={tweet.entities.media.media_url} alt=""/>
<p>{tweet.created_at}</p>
<p>{tweet.text}</p>
</div>
);
}
}
});
And then you would render that to the DOM. 然后将其呈现给DOM。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.