reactjs - React/date-fns - 使用“addSuffix”时组件“对象作为 React 子项无效”中的错误
问题描述
我创建了一个使用formatDistanceToNow方法date-fns
的组件。它工作正常,但是当我想使用该选项时,React 会抛出以下错误:addSuffix
Unhandled Runtime Error
Error: Objects are not valid as a React child (found: object with keys {addSuffix}). If you meant to render a collection of children, use an array instead.
import * as React from 'react'
import { format, parseISO, formatDistanceToNow } from 'date-fns';
function DateDistance({ text, dateString }) {
const date = parseISO(dateString);
return (
<>
<div className="text-xs font-medium text-gray-700">
<span>{text}</span>
<time>
{(formatDistanceToNow(date), { addSuffix: true })}
</time>
</div>
</>
);
}
function BlogPost({ post }) {
return (
<>
<h2>Hello World!</h2>
<p>This will be the subheader and below will be the published and updated date values.</p>
<DateDistance
text="and was updated "
dateString={post.updated_at}
/>
</>
)
}
解决方案
formatDistanceToNow(日期,[选项])
<time>{formatDistanceToNow(date, { addSuffix: true })}</time>
推荐阅读
- apache-spark - Spark 3.0 UTC 到 AKST 转换失败,出现 ZoneRulesException:未知时区 ID
- c# - Sql server 我想让存储过程在运行时获取表名并返回此表中的最后一行
- javascript - Vue firebase查询:如何使用无限加载显示下一个结果?
- java - 在具有特定条件的 ArrayList 中查找值
- java - 当我尝试打开活动时应用程序崩溃
- r - 更新:线图在 R 中变成锯齿形
- scala - Sbt/Scala - Gitlab 依赖
- java - 如何从数据库获取数据到arraylist并显示它们
- javascript - 在某个时间 t 或事件触发后解决一个承诺,以先发生者为准
- javascript - net::ERR_EMPTY_RESPONSE 当 API 请求返回响应时