React Data Table Component结合Moment格式化lastLogin出现取值错位问题

1. 字段类型不匹配：你在MongoDB中定义的lastLogin是Date类型的数组，并非单个Date值。直接渲染时React会自动将数组内容序列化为字符串：有值时显示日期字符串、空数组时显示为空，所以看起来正常。但直接将数组传入moment()格式化时，会触发moment的异常解析规则，非法输入会被解析为默认时间，同时数组作为引用类型也会导致组件渲染diff逻辑异常。
2. 空值未做兜底：当lastLogin为空数组时，未提前判断就直接传入moment，会产生非预期的解析结果。
3. 行唯一标识缺失：React Data Table Component默认使用id作为行的唯一key，如果你的数据集没有id字段、或者key重复，会触发组件的行复用逻辑，导致渲染内容错位。

1. 优先从lastLogin数组中取有效的日期值（通常取最后一次登录记录，即数组最后一位），同时增加空值判断：

{
  name: 'Last Login',
  selector: (row) => row.lastLogin?.length ? row.lastLogin[row.lastLogin.length - 1] : null,
  format: (row) => {
    const lastLoginDate = row.lastLogin?.length ? row.lastLogin[row.lastLogin.length - 1] : null
    return lastLoginDate ? moment(lastLoginDate).format('lll') : ''
  },
}

2. 如果lastLogin字段本身就应该存储单个日期而非登录时间数组，建议直接修改MongoDB模型定义，从根源避免类型不匹配问题：

// 去掉数组包裹，修改为单个Date类型
lastLogin: { type: Date, required: false }

3. 给DataTable组件添加keyField属性，指定每行数据的唯一标识字段，避免行复用导致的渲染错位：

<DataTable
  noHeader
  pagination
  paginationPerPage={15}
  paginationRowsPerPageOptions={paginationRowsPerPageOptions}
  responsive
  columns={columns}
  sortIcon={<ChevronDown />}
  className="react-dataTable"
  data={store.data}
  keyField="_id" // 替换为你数据中实际的唯一主键字段即可
/>

内容的提问来源于stack exchange，提问作者JJ Setsta