如何使用Moment.js为不同时间段录入的每个条目更新日志时间

问题原因 #

你当前代码中调用moment()没有传任何参数，默认会取代码执行瞬间的当前时间，这会导致所有条目每次渲染都会刷新为同一时间，无法保留每个条目录入时的对应日志时间。

解决方法 #

• 第一步：在新增收支条目的业务逻辑中，给每个item对象新增一个recordTime字段，存储条目录入时的时间值，录入时赋值为时间戳或者ISO格式字符串都可以，示例录入逻辑：

// 新增条目时的逻辑示例
const addNewItem = (title, price) => {
  const newItem = {
    title,
    price,
    // 存入当前录入的时间戳
    recordTime: moment().valueOf()
  }
  // 把newItem存入你的条目列表数组即可
}

• 第二步：修改现有代码里的时间渲染逻辑，从item中读取提前存好的录入时间再格式化：

<View style={[StyleSheet.absoluteFill, {}]}>
  <Animated.View
  style={{
    justifyContent: 'space-between',
    flexDirection: 'row',
    alignItems: 'center',
    height: 50,
    padding: theme.spacing.l,
  }}
  >
  {/* revenues and expenditures will appear */}
  <Animated.Text>{item.title}</Animated.Text> 
  <Text color="silver1">
    {/* 读取条目自身的录入时间再格式化 */}
    {moment(item.recordTime).format(' Do , h:mm:ss a')}
  </Text>
  <Animated.Text
    style={{
      opacity: hidePrice,
      color: item.price > 0 ? '#009BFC' : '#FF4500',
    }}
  >
    {item.price > 0
      ? `$${item.price}`
      : `- $${Math.abs(item.price)}`}
   </Animated.Text>
 </Animated.View>
</View>

修改后每个条目都会固定显示自己录入时的日志时间，不会随着页面刷新变化。

内容的提问来源于stack exchange，提问作者duy le