Нарушение инварианта: Объекты не действительны в качестве дочерних объектов React

Иногда вы можете попытаться отобразить данные в приложении React и увидеть в консоли следующую ошибку:

Objects are not valid as a React child (found: object with keys ...). If you meant to render a collection of children, use an array instead.

Printing Objects

Рассмотрим следующий код:

function App() {
  const name = { first: "John", last: "Doe" }

  return <div className="App">{name}</div>
}

export default App

Если вы выполните следующий код в вашем приложении react, вы увидите следующую ошибку в консоли браузера:

Это происходит потому, что мы пытаемся распечатать весь объект, а не значения внутри него. Мы можем исправить это, печатая имя, фамилию и имя отдельно, как показано ниже:

function App() {
  const name = { first: "John", last: "Doe" }

  return (
    <div className="App">
      {name.first} {name.last}
    </div>
  )
}

export default App

Отображение даты

Если вы используете следующий код для отображения даты, вы получите ту же ошибку:

function App() {
  const date = new Date()

  return <div className="App">{date}</div>
}

export default App

Здесь date — это объект. Чтобы получить дату в строковом формате, мы можем использовать метод toLocaleDateString():

function App() {
  const date = new Date()

  return <div className="App">{date.toLocaleDateString()}</div>
}

export default App

Дополнительные фигурные скобки

Если вы добавите лишние фигурные скобки при печати переменной, вы получите ту же ошибку:

function App() {
  const counter = 10

  return <div className="App">{{ counter }}</div>
}

export default App

Когда вы используете дополнительную фигурную скобку, она становится сокращенным обозначением объекта. То есть его можно расширить как {counter: counter}. Следовательно, он рассматривается как объект. Мы можем исправить это, удалив дополнительную фигурную скобку:

function App() {
  const counter = 10

  return <div className="App">{counter}</div>
}

export default App

Отображение массива jsx

Если у вас есть список и вы создали массив JSX для отображения, как показано ниже, вы снова столкнетесь с той же проблемой:

function App() {
  const list = ["foo", "bar"]

  const jsxToRender = list.map(item => <li>{item}</li>)

  return { jsxToRender }
}

export default App

Это можно исправить, заключив возвращаемое значение внутри элемента ul или просто возвращая jsxToRender без фигурных скобок.

function App() {
  const list = ["foo", "bar"]

  const jsxToRender = list.map(item => <li>{item}</li>)

  return <ul>{jsxToRender}</ul>
}

export default App

Отсутствие фигурных скобок

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

const Name = (first, last) => {
  return (
    <div>
      {first} {last}
    </div>
  )
}

function App() {
  return (
    <>
      <Name first={"John"} last={"Doe"} />
    </>
  )
}

export default App

Вы можете решить эту проблему, выполнив деструктуризацию объекта, как показано ниже:

const Name = ({ first, last }) => {
  return (
    <div>
      {first} {last}
    </div>
  )
}

function App() {
  return (
    <>
      <Name first={"John"} last={"Doe"} />
    </>
  )
}

export default App