Автоматическое обновление пользовательского интерфейса в ReactJS

Я новичок, чтобы отреагировать и не знаю, следует ли задавать этот вопрос или нет. Искали много блогов, но не смогли прийти к выводу. У меня есть API-интерфейс для отдыха, который постоянно обновляет данные на стороне сервера, например, API данных запаса. Теперь, если я использую $.get из jquery или fetch() из библиотеки ответов, он будет обновлять данные только при загрузке начальной страницы. Я ищу, так как изменение данных происходит с конца API одновременно, это изменение должно отражаться в пользовательском интерфейсе. Любая помощь будет оценена. Как описано в @Shubham Khatri, см. Ниже код te для реакции.Автоматическое обновление пользовательского интерфейса в ReactJS

var StockData = React.createClass({ 
     getInitialState: function() { 
     return { 
      stock: [] 
     }; 
     }, 

     componentDidMount: function() { 
     this.serverRequest = $.get(this.props.source, function (data) {  
      console.log(" Data value :"+data); 
      var old = data.replace("//", ""); 
      this.setState({ 
        stock: JSON.parse(old) 
       }); 

     }.bind(this)); 
     console.log(" Data value after bind :"+this.state.stock); 
     }, 

     componentWillUnmount: function() { 
     this.serverRequest.abort(); 
     }, 

     render: function() { 
     console.log(" Stock value :"+this.state.stock); 
     return (
       React.createElement("div",null, 
         React.createElement("ul",null, 
          this.state.stock.map(function (listValue){ 
           return React.createElement("li",null,listValue.t," (",listValue.e," ) - "," Current Price :",listValue.l_cur," Date : ",listValue.lt 
           ); 
          }) 
         ) 
        ) 
       ); 
      } 
     });

источник

2016-07-20 Worker

Вы можете сделать то, что после получения данных поместите данные в массив состояний с помощью 'setState()' и отрисуйте данные из него. Он будет автоматически обновлять DOM при каждом изменении. –

@Shubham Khatri Можете ли вы привести пример кода? – Worker

да, если вы предоставите мне ваш запрос на получение. и ответ образца –

Проблема заключается в том, что ваш запрос будет уволен только при начальной загрузке. Вам необходимо регулярно получать данные. Скажите, хотите ли вы сначала запустить запрос, а затем через каждые 2 секунды, вы можете сделать что-то подобное. Я полагаю, что это решит вашу проблему

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

startPolling: function() { 
    var self = this; 
    setTimeout(function() { 
     if (!self.isMounted()) { return; } // abandon 
     self.poll(); // do it once and then start it up every 2 seconds 
     self._timer = setInterval(self.poll.bind(self), 2000); 
    }, 1000); 
}, 

poll: function() { 
    var self = this; 
    $.get(this.props.source, function (data) {  
     console.log(" Data value :"+data); 
     var old = data.replace("//", ""); 
     self.setState({ 
       stock: JSON.parse(old) 
      }); 

    }.bind(this)); 
}

источник

2016-07-20 06:39:58

Спасибо большое. это сработало. – Worker

Рад помочь! :) –

На компоненте крепления называют loadDataFromServer() на заданный интервал времени и обновления состояния компонентов. Это приведет к повторному рендерингу компонента с обновленными данными состояния.

loadDataFromServer(component, apiUrl) { 
     axios.get(apiUrl).then(function(res) { 
      var dataList = res.data.list; 
      component.setState({ 
       data : dataList 
      }); 
     }); 
    } 

    componentDidMount() { 
     this.loadDataFromServer(this, this.state.dataEndpointUrl); 
     setInterval(this.loadDataFromServer.bind(null, this, this.state.dataEndpointUrl), this.state.pollInterval); 
    }

источник

2018-01-03 17:16:14 David

Автоматическое обновление пользовательского интерфейса в ReactJS

ответ

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