在React.js

Question

我有一个react组件，它使用ReactCSSTransitionGroup进行CSS转换，并且我的服务器启动并运行了一个虚拟数据库和一个API调用，它返回一个对象数组然后出于测试目的，我使用setTimeout查询我的api网址：

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

var ItemsList = React.createClass({
    getInitialState: function() {
        return {
            items: [],
            api: {
                getItems: '/api/items'
            }
        }
    },

    componentDidMount: function() {
        this.fetchData();
    },

    fetchData: function() {
        $.get(this.state.api.getItems, function(data) {               
            this.setState({
              items: data
            });
            setTimeout(this.fetchData, 3000);
        }.bind(this));
    },

    render: function() {
        var items = this.state.items.map(function(item, index) {
            return (
                <div className="title" key={index}>                                             
                    {item.title}                    
                </div>
            );
        }.bind(this));
        return (
            <div className="content">
                <ReactCSSTransitionGroup transitionName="example">
                    {items}
                </ReactCSSTransitionGroup>
            </div>      
        );  
    }
});

React.render(
    <ItemsList />,
    document.querySelector('.react')
);

这就是CSS：

.example-enter {
   opacity: 0.01;
}

.example-enter.example-enter-active {
   opacity: 1;
   transition: opacity 2.5s ease-in;
}

.example-leave {
   opacity: 1;
}

.example-leave.example-leave-active {
   opacity: 0.01;
   transition: opacity 2.5s ease-in;
}

我想要实现的是每次将一个项目添加到数组中时，我希望它能够进行动画制作，但是只有一个条件 - 新项目必须出现在列表的顶部。

所以我在PHP中做orderBy created_at DESC并且它成功地返回所有对象（按照我想要的顺序），但是React.js将新对象渲染到顶部，然后设置最后一个元素的动画（即使它在顶部添加了一个新的。）

我做错了什么？ ：（