react-timeago组件传入props.date到date属性无输出如何解决

• 确认date属性入参类型合规
  react-timeago的date属性仅支持三种合法入参：标准Date对象、毫秒级数字时间戳、可被Date.parse()正确解析的标准时间字符串（如ISO 8601格式）。如果你的props.date本身就是已经格式化完成的相对时间字符串（如2 days ago），那不需要使用react-timeago组件，直接渲染即可，react-timeago的作用是基于原始时间值自动计算相对时间，无法处理已经格式化好的相对时间文本。
  你可以先执行以下调试代码确认入参是否合法：

console.log(typeof props.date, new Date(props.date))

如果打印出的Date对象为Invalid Date，说明入参格式不符合要求，你需要先将父组件传入的日期值转换为上述三种合法类型后再传入TimeAgo组件，示例如下：

// 函数组件示例
const validDate = new Date(props.date);
// 仅日期合法时渲染组件
return <div>Published {!isNaN(validDate.valueOf()) && <TimeAgo date={validDate} formatter={formatter}/>}</div>

• 检查自定义formatter逻辑
  你当前传入了自定义formatter属性，可先临时移除该属性测试默认格式是否能正常渲染：

<div>Published <TimeAgo date={props.date} /></div>

如果移除后内容正常输出，说明你的自定义formatter函数存在逻辑问题，比如参数处理错误、未返回有效字符串，需要调整formatter的实现。

• 确认props取值方式匹配组件类型
  如果你使用的是类组件，需要用this.props.date取值，函数组件才可以直接用props.date，取值方式不匹配会导致传入TimeAgo的date值为undefined，自然没有内容输出。

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