用jquery进行响应不会在dom更改时更新UI

Question

I have a slider that i am adding slides to it when the user clicks on a button with setState and then call the jquery plugin to update, i see the new element on the dom but its seems like the jquery slider does not update the change and add the slider. what is the problem?

var Posts = React.createClass({
  componentDidMount: function() {
   swiper = new Swiper ('.swiper-container', {  
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev'
  });

  },
  updateData: function() {
    this.setState({
     posts: [{title:Math.random()}, {title:Math.random()},{title:Math.random()}]
    });
     swiper.update(true);

  },
  getInitialState: function() {
  return {
    posts: [{title:1111}, {title:2222}]
  }
  },
 render: function() {
 console.log('run');
  var postNodes = this.state.posts.map(function( post, i ) {
      return (
        <Post title={post.title} key={i}/>
      );
    });
 return (
        <section>
        <SwiperComponent>
          {postNodes}
        </SwiperComponent> 
        <button onClick={this.updateData}>update Data</button>
        </section>
    );
 } 
});

Fiddle: http://jsbin.com/tocujutaro/1/edit?html,js,output

Answer 1

The problem is that you're calling swiper synchronously after calling setState , but the change hasn't been applied to the DOM yet. Instead, you should do:

this.setState({...}, function () { // Update swiper });

This works because the callback passed to setState will execute after the state has been applied and the DOM has been updated.