React - 关于日期格式的控制台错误 - "Objects are not valid as a React child"

Question

我在控制台中收到与 "date" 类型相关的错误：

Uncaught (in promise) Invariant Violation: Objects are not valid as a React child (found: Wed Mar 06 2019 18:24:58 GMT-0800 (Pacific Standard Time)). If you meant to render a collection of children, use an array instead.

它引用的相关代码位：

const Conference = types
  .model('Conference', {
    id: types.identifyingNumber,
    date: types.Date,
    description: types.string,
  });

const conferenceStoreBase = types.model({ events: types.array(Event) });

并且内容被注入到另一个组件中，如下所示：

const ConferenceDisplay = inject('conferenceStore')(observer(({ conferenceStore }) => (
<div>
  {
    conferenceStore.conference.map((conference) => {
      const {
        id,
        date,
        description,
      } = conference;

      return (
        <ul key={id}>
          <li>{date}</li>
          <li>{description}</li>
        </ul>
      );
    })
  }
</div>

据我所知，这与需要将对象转换为字符串元素有关。我是 React 的新手，所以不确定如何从这里开始；任何 advice/guidance 将不胜感激。

Answer 1

将 Date 实例转换为字符串以进行呈现的最简单方法是使用 date.toLocaleDateString()。

例如：

const today = new Date()
today.toLocaleDateString()
// result: "3/6/2019"

您可以在 ConferenceDisplay 功能组件中执行此操作：

...
return (
  <ul key={id}>
    <li>{date.toLocaleDateString()}</li>
    <li>{description}</li>
  </ul>
)
...

React - 关于日期格式的控制台错误 - "Objects are not valid as a React child"

React - Console error with regards to Date format - "Objects are not valid as a React child"

javascript

reactjs

mobx