首页 > javascript > React - 有关日期格式的控制台错误 - “对象无效作为React子级”

React - 有关日期格式的控制台错误 - “对象无效作为React子级” (React - Console error with regards to Date format - “Objects are not valid as a React child&rd)

问题

我在控制台中收到与“日期”类型相关的错误:

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>

据我所知,这与需要将Object转换为字符串元素有关。我是React的新手,所以不确定如何从这里开始; 任何建议/指导将不胜感激。

解决方法

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>
)
...

问题

I'm receiving this error in the console that's related to the "date" type:

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.

The relevant bit of code that it's referencing:

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

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

And the content is being injected into another component like so:

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>

From what I can tell, this has to do with needing to convert the Object into a string element. I'm new to React, so unsure how to proceed from here; any advice/guidance would be appreciated.

解决方法

The simplest way to convert a Date instance to a string for rendering is to use date.toLocaleDateString().

For example:

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

You could do this inside of your ConferenceDisplay functional component:

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