динамически отображать массив с разными метками внутри функции return response js

Question

Я пытаюсь отобразить значения из массива в разных местах в функции возврата на странице, используя приведенный ниже код

   return (
  <div style={{ margin: 30 }}>
    <div className="form-group form-inline">
      <label style={{ display: 'margin-right:10px' }}>
      Section:</label> {requestDatasource[0].section}
    </div>
    <div className="form-group form-inline">
      <label style={{ display: 'margin-right:10px' }}>Type: </label> {requestDatasource[0].type}
    </div>
    <div className="form-group form-inline">
      <label style={{ display: 'margin-right:10px' }}>
      Requested By :     
      </label> {requestDatasource[0].createdBy}
    </div>
   <div className="form-group form-inline">
      <label style={{ display: 'margin-right:10px' }}>Requested Date: </label>

      {requestDatasource[0].createat}

    </div>
  </div>
 );

и я заполняю массив значениями, подобными приведенным ниже

if (requestData != null) {
requestData.allRequests.map((code) => {
  requestDatasource.push({
    id: code.id,
    section: code.masterSection.name,
    createdBy: code.createdBy,
    type: code.requestType.name,
    status: code.requestStage.name,
    createat: new Date(code.createdAt),
  });
  return null;
});
}

но почему-то я получаю эту ошибку

 `Objects are not valid as a React child. If you meant to render a collection of children, use an array instead.`

Я не уверен, где я ошибаюсь с этим кодом. Может ли кто-нибудь сообщить мне, в чем будет проблема с приведенным выше кодом в методе возврата.

PS: я использую функциональные компоненты react js

заранее спасибо

Answer 1

В JSX вы должны использовать примитивные значения, а не такие объекты, как Date. Итак, измените свой код:

<div className="form-group form-inline">
  <label style={{ display: 'margin-right:10px' }}>Requested Date: </label>

  {requestDatasource[0].createat.toString()} /* or any other String() */

</div>

Это причина того, что когда вы обновляете свой код createat: new Date(code.createdAt) к createat: code.createdAt, тогда это работало с тех пор createat была строка, которая работает в JSX.

Вы также можете использовать другие Date.to***String() такие методы, как toUTCString() или toLocaleString().

Answer 2

Возможно ли, что стоимость requestDatasource[0].section, requestDatasource[0].type, и / или requestDatasource[0].createdByтакие объекты? Я бы начал с двойной проверки того, что значения соответствуют вашим ожиданиям.

---

В некоторой степени не связано, но я думаю, что вы могли бы использовать map лучше, или измените его на forEach. Вы используете его сейчас, говоря: "Для каждого значения вrequestData.allRequests, переместите новый объект в requestDatasource."И то, что ты возвращаешься null является доказательством того, что вам не нужен map. Если вы изменитеmap к forEach, вы можете удалить return null и получить легкую победу.

Тем не менее, я думаю, что ваша интуиция mapможет быть правильным. А неpush внешнему requestDatasource, возможно, вы сможете сгенерировать новую структуру данных, используя map, и создать requestDatasource прямо там:

const requestDatasource = requestData.allRequests.map(code => {
  return {
    id: code.id,
    section: code.masterSection.name,
    createdBy: code.createdBy,
    type: code.requestType.name,
    status: code.requestStage.name,
    createdAt: new Date(code.createdAt)
  };
});