Ошибка React - консоли в отношении формата даты - "Объекты недопустимы как дочерний элемент React"

#javascript #reactjs #mobx

Вопрос:

Я получаю эту ошибку в консоли, связанную с типом «дата»:

 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>

Насколько я могу судить, это связано с необходимостью преобразования объекта в элемент string. Я новичок в React, поэтому не уверен, как действовать дальше; буду признателен за любые советы / наставления.

Ответ №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>
)
...