我创建了一个React组件，该组件呈现给定ID数组的一组子元素。id的数组保持在父组件的状态，然后我根据id运行一些ajax调用以获取要渲染的数据。所获取的数据在该状态下存储在单独的数据数组中。呈现的组件
将id用作key 。

id可以根据组件外部的操作而更改，因此我在组件上使用setState替换数组。 更新后的id状态可能包含与原始数组中相同的id。
同时，我清空“数据数组”，以便再次呈现所有内容。

当我这样做时，有时会收到密钥警告：

警告：flattenChildren（…）：遇到两个具有相同密钥的孩子。子键必须是唯一的；当两个孩子共享一个密钥时，将仅使用第一个孩子。

新数组不包含任何重复项。那么为什么会发生这种情况，我该怎么做才能避免这种情况？

编辑：根据要求添加了一些代码。注意：我正在使用Infinite
Scroll模块。这可能是原因吗？

初始状态：

getInitialState: function() {
  return {
    hasMore: true,
    num: 0,
    movieIds: this.props.movieIds,
    movies: []
  };
},

渲染功能：

render: function() {
  var InfiniteScroll = React.addons.InfiniteScroll;

  return (
    <InfiniteScroll
        pageStart={0}
        loadMore={this.loadMore}
        threshold='20'
        hasMore={this.state.hasMore}>
        <ul className="movieList">
          {this.state.movies}
        </ul>
    </InfiniteScroll>       
);
}

简化加载更多：

comp = this;
$.ajax( {
  url: url,
  contentType: "json",
  success: function (data) {
    var m = createMovieLi(data);
    var updatedMovies = comp.state.movies;
    updatedMovies[num] = m;
    comp.setState({movies: updatedMovies});
  }
});

最后，在组件外进行更新时：

movieBox.setState({
  hasMore: true,
  num: 0,
  movieIds: filteredIds,
  movies: []
});