组件获取重复的内容，而不是刷新

我正在复习ReactJS，下面是https://facebook.github.io/react/docs/tutorial.html当我玩这个例子时，我遇到了一个奇怪的行为。问题是一个元素（注释）的内容没有被刷新。相反，它会复制新数据。

在http://jsfiddle.net/L0xy4jqa/2/

怎么了？

代码：

/* HTML */
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
<div id="content"></div>
/* JS */
var DATA = [
        {author:"Mr. Raspa Pan", color:"darkblue", text: "- some content"},
        {author:"Mrs. Pasa Sa", color:"darkgreen", text: "- some *other* content"},
        {author:"Mrs. Rata Tan", color:"brown", text: "- __more__ content"},
        {author:"Mr. Aspa Spa", color:"deeppink", text: "- Code like:  `for (;true;) {lv(u)}`"}    
    ];
var DATA2 = [
        {"author":"Mrs. Raspa Pan Pan", "color":"blue", "text": ">- some *chaged* content"},
        {"author":"Mrs. Pasa Sa Sa", "color":"green", "text": ">- some *other* __changed__ content"},
        {"author":"Mr. Rata Tan Tan", "color":"red", "text": ">- __more__ **changed** content"},
        {"author":"Mr. Aspa Spa Spa", "color":"pink", "text": ">- Code like: `with (you) { lv(this); }`"}  
    ];
var Comment = React.createClass({
  render: function (){
    var markdown = marked(this.props.children.toString(), {sanitize: true});
    return(
      <div className="comment" style={{border: "1px solid orange", padding: "5px"}}>
        Hello, world! I am a comment from:
        <h2 className="commentAuthor" style={{color: this.props.color, border: "1px solid purple", margin: "0"}}>
          {this.props.author}
        </h2>
//This line below has the problem: it should be <div className="commentContent" ... in order to hold the <p> returned by marked
        <p className="commentContent" dangerouslySetInnerHTML={{__html: markdown}} />
      </div>
    );
  }
});
var CommentList = React.createClass({
  render: function(){
    var commentNodes = this.props.data.map(function (comment,i){ return(
        <Comment key={i} author={comment.author} color={comment.color}>{comment.text}</Comment>);
        }
      );
    return (
      <div className="commentList" style={{border: "1px dashed blue", padding: "5px"}}>
        Hello, world! I am a CommentList. And I have comments:
        {commentNodes}
      </div>
    );
  }
});
var CommentBox = React.createClass({
  getInitialState: function(){
    return {data: this.props.data};
  },
  componentDidMount: function () {
     var o = this;
    setTimeout(function(){
        o.setState({data: DATA2});
    },2000);      
  },
  render: function() {
    return (
      <div className="commentBox" style={{color: "grey", border: "1px solid red", padding: "5px"}}>
        Hello, world! I am a CommentBox and I have a list of comments.
        <CommentList data={this.state.data}/>
      </div>
    );
  }
});
React.render(
  <CommentBox data={DATA} url="comments.json"/>,
  document.getElementById('content')
);