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

问题描述 投票:0回答:1

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

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的新手,所以不确定如何从这里开始;任何建议/指导将不胜感激。

javascript reactjs mobx
1个回答
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>
)
...
© www.soinside.com 2019 - 2024. All rights reserved.