2017-01-29 4 views
1

Я делаю свой проект в реакциях, и я хочу, чтобы время назад отображалось в таблице. Я использую момент js, чтобы показать время назад (fromNow()), но он показывает время в несколько секунд только тогда, когда данные поступают с сервера. И это показывает сразу 6 часов назад, если данные не поступают с сервера.Eg afer 2minutes временного интервала, который он показывает 6 часов назад. Как показано в таблице ниже. table to shoe time agoExact Time Ago не наступает момент js

код моего проекта приведен ниже

componentDidMount() { 
let socket = new WebSocket('wss://api.example.com.np/ws'); 
this.setState({ socket: socket,noOfVehicle:this.state.supportInfo.length }); 
this.getSupportInfo(); 
socket.onmessage = ((message) => { 
    let socketData = JSON.parse(message.data); 
    let device_id = socketData[0].device_id; 
    let updatedSupportInfo = this.getUpdatedInfo(this.state.sourceName); 
    let flag = true; 
    let uSupport = updatedSupportInfo.map(function(item){ 
    if(device_id == item.device_id){ 
     item.current_pos = socketData[0].current_pos; 
     if(item.current_pos){ 
     flag = true; 
     item["latlng"] = item.current_pos.x + ',' + item.current_pos.y; 
     }else{ 
     flag = false; 
     } 
    let time = new Date(socketData[0].timestamp); 
    let now = new Date();  
     let timeAgoIn = moment(time).fromNow(true); 
     item["timeAgoIn"] = timeAgoIn; 
     } 

getSupportInfo() { 
axios({ 
     method: 'get', 
     url: 'https://support.taranga.com.np/support_info' 
     }) 
    .then((response) => { 
     for (var i = 0; i < response.data.length; i++) { 
      if(response.data[i].current_pos){ 
      response.data[i]["latlng"] = response.data[i].current_pos.x + ',' + response.data[i].current_pos.y; 
      let time = new Date(response.data[i].timestamp) 
      let now = new Date(); 
      let a = moment(time); 
      let b = moment(now); 
      let timeAgo = b.diff(a, 'hours') 
      let timeAgoIn = moment(time).fromNow(true) 
      response.data[i]["timeAgo"] = timeAgo; 
      response.data[i]["timeAgoIn"] = timeAgoIn; 
} 
     } 
     this.setState({ 
     supportInfo: response.data 
     }); 
    }) 
    .catch((error)=>{ 
     throw (error); 
    }); 
} 

getUpdatedInfo(name) { 
    let uInfo = []; 
    let tempSupport = this.state.supportInfo.slice(); 
    _.map(tempSupport,(value,key) =>{ 
     if(value.timeAgo !=0){ 
     let time = new Date(value.timestamp) 
     let now = new Date(); 
     let a = moment(time); 
     let b = moment(now); 
     let timeAgo = b.diff(a, 'minutes') 
     console.log(timeAgo); 
     //let timeAgo = moment.duration(b-a).humanize() 
     let timeAgoIn = moment(time).fromNow(true) 
     value["timeAgo"] = timeAgo; 
     value["timeAgoIn"] = timeAgoIn; 
     } 
    }); 
    this.setState({ 
     supportInfo:tempSupport 
    }); 

код, чтобы показать в таблице

<TableHeaderColumn dataField="timeAgoIn" dataSort={true}>Time Ago</TableHeaderColumn> 
+0

почему вы используете 'нового Date()' для ' timestamp' с сервера? Это требуется? И какой формат «timestamp»? –

ответ

0

Я считаю, что ваша логика несовершенна, когда вы получаете информацию, которую Вы храните timeAgo один раз, однако timeAgo - свойство, которое изменяется со временем, например:

Вы получаете сообщение в 12:00, вы устанавливаете timeAgo на 1 секунду (или w/e js устанавливает его) Вы проверяете свой экран в 12:05, timeAgo для этого сообщения все еще 1 секунда, потому что это вычисляется один раз, но время прошло, а timeAgo должно быть 5 секунд назад, правильно?

timeAgo собственность должна оставаться в качестве метки времени вы получили от сервера и быть вычислены при обновлении вашей таблицы (если вы хотите сделать это другая тема)

+0

да, я сделал то, что вы сказали. Но ничего не изменилось. Все та же проблема. –

+0

Первое, что я понял: 'let uSupport = updatedSupportInfo.map (function (item) { if (device_id == item.device_id)' это не то, как вы должны использовать 'map' use' find' вместо Второе: обновите свой пост кодом, который вы используете, чтобы обновить расчет времени назад. Я не могу комментировать код, который я не вижу. – ospfranco