React 渲染 数组 元素问题！！

#1

我有一个列表，每个列表元素点开都是一个全屏轮播图组件，全屏轮播图组件是一个，它接收每一个列表元素传过来的图片集，但我点开一个有 15 张轮播图后关闭，再点开一个 3 张图片的轮播图，那15张图片其中的 12 张还在HTML中！！！这个是啥问题呢？key 也设置了。。。

补充：


var FullScreenSlider = React.createClass({
  render() {
    var 
        slierItems = [];
    
    this.props.imgs.forEach((obj, index)=>{
      sliderItems.push(<SliderItem key={'slider-'+keyid++} />);
    });
    
    return (
      <div>
        { sliderItems }
      </div>
    );
  }
});

var List = React.createClass({
  getInitialState() {
    return {
      imgs: '3张图片'  // or '15张图片' or '1张图片'
    };
  },

  handleSliderClick(){
    this.context.showFullSlider(this.state.imgs);
  },

  render() {
    return (
      <div>
        <ul>
          <li onClick={this.handleSliderClick}>
            3张图片
          </li>
          <li onClick={this.handleSliderClick}>
            15张图片
          </li>
          <li onClick={this.handleSliderClick}>
            1张图片
          </li>
        </ul>
      </div>
    );
  }
});

var Trending = React.createClass({
  showFullSlider(imgs){
    this.setState({
      images: imgs
    });
  },

  render() {
    return (
      <div>
        <List listData={this.state.data} />

        <FullScreenSlider imgs={this.state.images} />
      </div>
    );
  }
});

List 里面 三个 li 点击事件会调用父组件 Trending 的方法，设置要轮播的图片；FullScreenSlider 是一直挂载在 Trending 上的；

现在的问题就是：List 里面不管点击哪个 li 按钮，FullScreenSlider 里面的HTML DOM只会多，不会少，比如：点击 li(15张图片) 是正常的，在点击 li(1张图片) 的，轮播里面还是 15 张图片。。。

#2

Uncaught TypeError: Cannot read property ‘getHostNode’ of null 现在报了这个错。。

#3

talk is cheap

#4

上代码啊

#5

sorry for that

#6

上代码啊

#7 
var FullScreenSlider = React.createClass({
  render() {
    var 
        slierItems = [];
    
    this.props.imgs.forEach((obj, index)=>{
      sliderItems.push(<SliderItem key={'slider-'+keyid++} />);
    });
    
    return (
      <div>
        { sliderItems }
      </div>
    );
  }
});

var List = React.createClass({
  getInitialState() {
    return {
      imgs: '3张图片'  // or '15张图片' or '1张图片'
    };
  },

  handleSliderClick(){
    this.context.showFullSlider(this.state.imgs);
  },

  render() {
    return (
      <div>
        <ul>
          <li onClick={this.handleSliderClick}>
            3张图片
          </li>
          <li onClick={this.handleSliderClick}>
            15张图片
          </li>
          <li onClick={this.handleSliderClick}>
            1张图片
          </li>
        </ul>
      </div>
    );
  }
});

var Trending = React.createClass({
  showFullSlider(imgs){
    this.setState({
      images: imgs
    });
  },

  render() {
    return (
      <div>
        <List listData={this.state.data} />

        <FullScreenSlider imgs={this.state.images} />
      </div>
    );
  }
});

List 里面 三个 li 点击事件会调用父组件 Trending 的方法，设置要轮播的图片；FullScreenSlider 是一直挂载在 Trending 上的；

现在的问题就是：List 里面不管点击哪个 li 按钮，FullScreenSlider 里面的HTML DOM只会多，不会少，比如：点击 li(15张图片) 是正常的，在点击 li(1张图片) 的，轮播里面还是 15 张图片。。。

#8

@Nokey 大佬，你这个问题解决了嘛？
本人一菜鸟刚学React，
我也是渲染数组元素的：
之前的数据是 [{a},{b}]
然后我想改变他成 [{b}]
传过去之后， 他变成了 [{b},{b}]，不知道这个改如何处理。。
感觉只能添加，不能删除一样的，可否 请大佬 不吝赐教 一下。