Question

我有以下函数根据来自另一个组件的流式SignalR数据呈现行：

let prev
let next

renderRow = () = {
    this.props.incomingData.map(item => {
        return (
            <tr>
                <td>{item.time}</td> //00:00:00 format
                <td>{this.calculateSecondsTaken()}</td> //should show the time difference in seconds
                <td>{item.event}</td>
                <td>{item.message} <br/>{item.outputURL}</td>
            </tr>
        )
    })
}

我试图通过从上一次（在行中）减去当前时间，根据item.time属性值获取每个数据行的时间差。

//calculates the difference between the previous and the incoming (next) time value to give the time taken
//for the current row's data to come in.
calculateSecondsTaken = (prev, next) => {
    next - prev;
}

我知道在上面的函数中它必须是基于前一个和下一个时间值的某种减法，但我不能完全确定它的逻辑。例如，第一行等的区别是什么。

编辑：数据流组件如下

deploymentEventMessageReceived = (item: DeploymentEvent) => {
    let dataset = {
        time: item.UtcNowPrettyText, //this is the time value
        event: item.EventName,
        message: item.Message,
        outputURL: item.OutputUrl
    }
    let newDataArray = this.state.receivedData.concat(dataset);

    this.setState({
        receivedData: newDataArray
    });
}

deploymentEventMessageReceived()反过来在我连接SignalR的函数内被调用。

编辑2更新（工作版本）：

deploymentEventMessageReceived = (item: DeploymentEvent) => {
  let lastEntryTime;
  newArray = newArray.concat(item);

  if (newArray.length == 1) {
    lastEntryTime = moment(newArray[newArray.length - 1].UtcNowPrettyText)
  } else {
    lastEntryTime = moment(newArray[newArray.length - 2].UtcNowPrettyText)
  }

  timeDiff = moment(item.UtcNowPrettyText).diff(lastEntryTime, "seconds");

  //create new object with the addition of TimeDifference attribute
  let dataset = {
    UtcNowPrettyText: item.UtcNowPrettyText,
    EventName: item.EventName,
    Message: item.Message,
    OutputUrl: item.OutputUrl,
    TimeDifference: timeDiff
  }

  //store it in a new array
  finalDatasetArray = finalDatasetArray.concat(dataset);

  this.setState({
    receivedData: finalDatasetArray
  });
}

数据流组件的render（）内部

<RenderRow receivedData={this.state.receivedData} />

感谢任何帮助。

Answer 1

我会以这种方式实现时间差计算：我跟踪Date.now()，我不会渲染但是将其保存在每个条目中，以便我可以对其进行数学运算。我不知道你是如何计划渲染时差的，但我把它放在this.state的示例中。

deploymentEventMessageReceived = (item) => {
    let dataset = {
        time: item.UtcNowPrettyText, //this is the time value
        event: item.EventName,
        message: item.Message,
        outputURL: item.OutputUrl,
        date: Date.now()
    }
    let lastEntry = this.state.receivedData[this.state.receivedData.length - 1]
    let timeDifference = dataset.date - lastEntry.date //time in ms
    let newDataArray = this.state.receivedData.concat(dataset);

    this.setState({
        receivedData: newDataArray,
        timeDifference: timeDifference
    });
}

编辑：我的个人实现是实际拆分这两个概念。我保留Date.now()并使用不同的函数来实际构建时差数组。永远不知道以后是否需要Date.now()，在数据中完整地设置时间戳会更有意义。您无需立即添加item。你可以稍后再结。我使用对象解构来将赋值清理为2个单行。

deploymentEventMessageReceived = (item) => {
  let { UtcNowPrettyText, EventName, Message, OutputUrl } = item
  let dataset = { UtcNowPrettyText, EventName, Message, OutputUrl, Date: Date.now() }
  this.setState({receivedData: this.state.receivedData.concat(dataset)})
}

buildTimeDifferences = (entries) => {
  let newArr = []
  for (let i = 0; i < entries.length; i++) {
    if (i !== entries.length - 1) {
      newArr.push(entries[i + 1].Date - entries[i].Date)
    }
  }
  return newArr
}


d = [{Date: 1},{ Date: 2}, {Date: 4}, {Date: 7}]
console.log(buildTimeDifferences(d))

计算流数据集的时间差

1 个答案: