未在 render() 中渲染的反应元素数组

Question

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

我正在使用 twitter API 从 BOINGBOING twitter 页面获取最近的 3 条推文。我可以确认我的 API 正常工作，并且可以控制包含 created_at、text 和 value.entities.media[0].media_url 的对象数组，这基本上是推文的图像 url。

我想要实现的是在包含 img 和 2 个 p 标记的 div 标记内显示三个推文。

我正在使用 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

我不确定您在这种情况下是否正确使用了 react，这就是我的做法。

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。