React/date-fns - 使用 'addSuffix' 时组件 'Objects are not valid as a React child' 出错

Question

我创建了一个使用 date-fns 和 formatDistanceToNow 方法的组件。它工作正常但是当我想使用 addSuffix 选项时，React 抛出以下错误：

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}
    />
   </>
  )
}

Answer 1

formatDistanceToNow（日期，[选项]）

<time>{formatDistanceToNow(date, { addSuffix: true })}</time>

React/date-fns - 使用 'addSuffix' 时组件 'Objects are not valid as a React child' 出错

React/date-fns - error in component 'Objects are not valid as a React child' when using 'addSuffix'

reactjs

date

date-fns