未在render（）

Question

我正在通过使用Meteor创建一些示例项目来学习反应。我想我已经掌握了它，但现在又被卡住了。

我正在使用Twitter API从BOINGBOING twitter页面获取最新的3条推文。我可以确认我有API工作，并且可以控制出包含created_at，text和＆amp;的对象数组。 value.entities.media[0].media_url这基本上是推文的图片网址。

我想要实现的是在div标记内显示三条推文，其中包含img＆amp; 2 p个标签。

我正在使用JSX构建DOM，将当前推文的DOM推送到数组中，然后将此数组传递给render（）。我认为React元素的数组应该正确呈现？那么我的错误是什么，我什么都看不见？

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

当我调出我的反应元素时，这就是我所看到的。

Answer 1

我不知道meteor，但看起来Meteor.call是异步的，所以它不能只返回res。您可能需要在asyncCallback中调用setState({ someKey: res })，并在render()调用中使用该状态。

Answer 2

我不确定你在这种情况下是否正确使用了反应，这就是我如何做到的。

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

然后你会把它呈现给DOM。