2015-09-29 9 views
3

Так что я создал следующие подмешать:опроса не работает в React JS Mixin

var Polling = { 

    startPolling: function() { 
     var self = this; 

     setTimeout(function() { 
      self.poll(); 

      if (!self.isMounted()) { 
       return; 
      } 

      self._timer = setInterval(self.poll(), 15000); 
     }, 1000); 
    }, 

    poll: function() { 
     if (!this.isMounted()) { 
      return; 
     } 

     var self = this; 
     console.log('hello'); 
     $.get(this.props.source, function(result) { 
      if (self.isMounted()) { 
       self.setState({ 
        error: false, 
        error_message: '', 
        users: result 
       }); 
      } 
     }).fail(function(response) { 
      self.setState({ 
       error: true, 
       error_message: response.statusText 
      }); 
     }); 
    } 
} 

Обратите внимание на console.log('hello'); в функции poll. Я должен видеть это каждые 15 секунд в соответствии с этой логикой.

Теперь давайте посмотрим на среагировать компонента:

//= require ../../mixins/common/polling.js 
//= require ../../mixins/common/state_handler.js 
//= require ../../components/recent_signups/user_list.js 

var RecentSignups = React.createClass({ 

    mixins: [Polling, StateHandler], 

    getInitialState: function() { 
     return { 
      users: null, 
      error_message: '', 
      error: false 
     } 
    }, 

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

    componentWillUnmount: function() { 
     if (this._timer) { 
      clearInterval(this._timer); 
      this._timer = null; 
     } 
    }, 

    shouldComponentUpdate: function(nextProps, nextState) { 
     if (this.state.users   !== nextState.users || 
      this.state.error   !== nextState.error || 
      this.state.error_message !== nextState.error_message) { 

      return true; 
     } 

     return false; 
    }, 

    renderContents: function() { 
     if (this.state.users === null) { 
      return; 
     } 

     return (
      <div> 
       <ul> 
        <UserList users={this.state.users} /> 
       </ul> 
      </div> 
     ); 
    }, 

    render: function() { 
     return (
      <div> 
      {this.loading()} 
      {this.errorMessage()} 
      {this.renderContents()} 
      </div> 
     ) 
    } 
}); 

RecentSignupsElement = document.getElementById("recent-signups"); 

if (RecentSignupsElement !== null) { 
    ReactDOM.render(
     <RecentSignups source={ "http://" + location.hostname + "/api/v1/recent-signups/" } />, 
     RecentSignupsElement 
    ); 
} 

Здесь мы видим в componetDidMount функции Я звоню this.startPolling При загрузке страницы, что я вижу через 1 секунду:

hello 
hello 
  • A) его (poll fucntion) некоторые из них называются дважды oO.
  • B) его (poll функция), никогда не вызываемый снова.

Причина, по которой я отлаживал опрос, заключается в том, что я могу использовать его в других компонентах на одной странице, а не в дублирующем коде.

Очень просто вопрос (ы):

Почему и как это исправить? Мне нужно, чтобы он проводил опрос каждые 15 секунд, и я должен видеть только hello, когда poll называется в первый раз.

ответ

6

На этой линии вы называете self.poll() и результат был бы таймер:

self._timer = setInterval(self.poll(), 15000); 

Вместо передать функции:

self._timer = setInterval(self.poll, 15000); 
0

В качестве другого варианта, в духе " вы код не работает, просто используйте вместо него кого-то! », react-async-poll - удобная оболочка компонента, которую вы можете использовать для опроса.

 Смежные вопросы

  • Нет связанных вопросов^_^