ReactJS Ошибка: объекты недопустимы как дочерний элемент React. Если вы хотите отобразить коллекцию дочерних элементов, используйте вместо этого массив

Question

fakeMovieService. js:

const movies = [
  {
    _id: "5b21ca3eeb7f6fbccd471815",
    title: "Terminator",
    genre: { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" },
    numberInStock: 6,
    dailyRentalRate: 2.5,
    publishDate: "2018-01-03T19:04:28.809Z"
  },
//and a few more movie objects of the same format
];

export function getMovies() {
  return movies;
}

фильмов. js

import React, { Component } from "react";
import { getMovies } from "../services/fakeMovieService";

class Movies extends Component {
  state = {
    movies: getMovies(),
  };

  render() {
    return (
      <div>
        <div className="jumbotron text-center">
          <div className="container">
            <h1>Vidly</h1>
          </div>
        </div>
        <h1>Vidly</h1>
        <table className="table">
          <thead>
            <tr>
              <th scope="col">Title</th>
              <th scope="col">Genre</th>
              <th scope="col">Stock</th>
              <th scope="col">Rate</th>
            </tr>
          </thead>
          <tbody>
            {this.state.movies.map((element) => (
              <tr key={element._id}>
                <th scope="col">{element.title}</th>
                <th scope="col">{element.genre}</th>
                <th scope="col">{element.numberInStock}</th>
                <th scope="col">{element.dailyRentalRate}</th>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
  }
}

export default Movies;

Я получаю эту ошибку :

act-dom.development. js: 13413 Неопознанная ошибка: объекты недопустимы как дочерний элемент React (найдено: объект с ключами {_id, name}). Если вы хотите отобразить коллекцию дочерних элементов, используйте вместо этого массив.

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

Answer 1

element.genre - это объект, и вы фактически пытаетесь отобразить его явно.

<th scope="col">{element.genre}</th> // here your code fails

Например, вы можете указать прямо на поле name внутри element.genre объекта для успешной компиляции.

<th scope="col">{element.genre.name}</th>