Блог

Главная - Вопросы по программированию - Объекты React недопустимы как дочерние объекты React

Объекты React недопустимы как дочерние объекты React

#javascript #reactjs

#javascript #reactjs

Вопрос:

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

У меня есть headers массив, подобный этому

  headers = [
    {
      text: "id",
      value: "id",
    },
    {
      text: "Name",
      value: "name",
    },
    {
      text: "Description",
      value: "description",
    },
    {
      text: "Created",
      value: "createdAt",
    },

и items массив, подобный этому

  items = [
    {
      id: 1,
      name: "Pathum",
      description: "Never give up",
      createdAt: new Date(),
    },
  ],

В моем приложении

 export default function App() {
  return (
    <div>
      <table>
      <tr>
      {
        headers.map(header=>(<th>{header.text}</th>))
      }
      </tr>
      {
        items.map(row=>(
          <tr>
            {
              headers.map(({value})=>(
               row[value]
              ))
            }
          </tr>
        ))
      }
      </table>
    </div>
  );
}

С отображением заголовков таблиц все в порядке. Проблема заключается в рендеринге табличных данных. Это выдает ошибку.

Объекты недопустимы как дочерние объекты React

Это пример живого кода https://stackblitz.com/edit/react-rj3unu?file=src/App.js

Почему это могло произойти? Любая помощь!

Комментарии:

1. Поскольку вы сопоставляете дважды, вы возвращаете вложенный массив (матрицу)…

Ответ №1:

Это из-за new Date() .

Вы можете преобразовать его в строку с помощью new Date().toString()

Объекты недопустимы как дочерние объекты React

As new Date() возвращает Date объект.

Ответ №2:

Вам также не хватает тега данных таблицы 🙂

 <td>{row[value]}</td>