Javascript 对象作为子对象无效，请渲染子对象集合，改用数组

这个类给了我错误

错误：对象作为React子对象无效（找到：具有键的对象 {{u id，name}）。如果要渲染子对象集合，请使用 而不是数组。）

这里有什么问题吗？这里我传递movies对象并遍历map方法。如果是错误的，我怎么做？我在这里看到了一些类似的问题，但没有帮助我

import React, { Component } from 'react';
class Movies extends Component {
    state = { 
        movies: [
            {
              _id: "5b21ca3eeb7f6fbccd471815",
              title: "Terminator",
              genre: { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" },
              numberInStock: 6,
              dailyRentalRate: 2.5,
              publishDate: "2018-01-03T19:04:28.809Z",
              liked: false
            },
            {
              _id: "5b21ca3eeb7f6fbccd471816",
              title: "Die Hard",
              genre: { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" },
              numberInStock: 5,
              dailyRentalRate: 2.5,
              liked: true
            },
            {
              _id: "5b21ca3eeb7f6fbccd471817",
              title: "Get Out",
              genre: { _id: "5b21ca3eeb7f6fbccd471820", name: "Thriller" },
              numberInStock: 8,
              dailyRentalRate: 3.5,
              liked: true
            },
            {
              _id: "5b21ca3eeb7f6fbccd471819",
              title: "Trip to Italy",
              genre: { _id: "5b21ca3eeb7f6fbccd471814", name: "Comedy" },
              numberInStock: 7,
              dailyRentalRate: 3.5,
              liked: false
            },
            {
              _id: "5b21ca3eeb7f6fbccd47181a",
              title: "Airplane",
              genre: { _id: "5b21ca3eeb7f6fbccd471814", name: "Comedy" },
              numberInStock: 7,
              dailyRentalRate: 3.5,
              liked: true
            },
            {
              _id: "5b21ca3eeb7f6fbccd47181b",
              title: "Wedding Crashers",
              genre: { _id: "5b21ca3eeb7f6fbccd471814", name: "Comedy" },
              numberInStock: 7,
              dailyRentalRate: 3.5,
              liked: false
            },
            {
              _id: "5b21ca3eeb7f6fbccd47181e",
              title: "Gone Girl",
              genre: { _id: "5b21ca3eeb7f6fbccd471820", name: "Thriller" },
              numberInStock: 7,
              dailyRentalRate: 4.5,
              liked: false
            },
            {
              _id: "5b21ca3eeb7f6fbccd47181f",
              title: "The Sixth Sense",
              genre: { _id: "5b21ca3eeb7f6fbccd471820", name: "Thriller" },
              numberInStock: 4,
              dailyRentalRate: 3.5,
              liked: true
            },
            {
              _id: "5b21ca3eeb7f6fbccd471821",
              title: "The Avengers",
              genre: { _id: "5b21ca3eeb7f6fbccd471818", name: "Action" },
              numberInStock: 7,
              dailyRentalRate: 3.5,
              liked: false
            }
          ]
     }  

     handleDelete = (movie) => {
         console.log("movie deleted")
     };

    render() { 
        return ( 
        <React.Fragment>
                <p>Showing 9 movies in the database</p>

                <table className="table table-hover">
                    <thead>
                        <tr>
                        <th scope="col">Title</th>
                        <th scope="col">Genre</th>
                        <th scope="col">Stock</th>
                        <th scope="col">Rate</th>
                        <th scope="col">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        {this.state.movies.map(movie => (
                            <tr key={movie._id}>
                            <th>{movie.title}</th>
                            <td>{movie.genre}</td>
                            <td>{movie.numberInStock}</td>
                            <td>{movie.dailyRentalRate}</td>
                            <td><button onClick={() =>this.handleDelete(movie)} type="button" className="btn btn-danger">Delete</button></td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            
            </React.Fragment>
         );
    }
}
 
export default Movies;

import React，{Component}来自'React'；
类扩展组件{
状态={
电影：[
{
_id:“5b21ca3eeb7f6fbccd471815”，
标题：“终结者”，
体裁：{u id:“5b21ca3eeb7f6fbccd471818”，名称：“动作”}，
库存数量：6，
Dailrentalrate:2.5，
出版日期：“2018-01-03T19:04:28.809Z”，
喜欢：错
},
{
_id:“5b21ca3eeb7f6fbccd471816”，
标题：“死硬”，
体裁：{u id:“5b21ca3eeb7f6fbccd471818”，名称：“动作”}，
库存数量：5，
Dailrentalrate:2.5，
喜欢：真的
},
{
_id:“5b21ca3eeb7f6fbccd471817”，
标题：“滚出去”，
类型：{u id:“5b21ca3eeb7f6fbccd471820”，名称：“Thriller”}，
库存数量：8，
Dailrentalrate:3.5，
喜欢：真的
},
{
_id:“5b21ca3eeb7f6fbccd471819”，
标题：“意大利之旅”，
类型：{u id:“5b21ca3eeb7f6fbccd471814”，名称：“喜剧”}，
库存数量：7，
Dailrentalrate:3.5，
喜欢：错
},
{
_id:“5b21ca3eeb7f6fbccd47181a”，
标题：“飞机”，
类型：{u id:“5b21ca3eeb7f6fbccd471814”，名称：“喜剧”}，
库存数量：7，
Dailrentalrate:3.5，
喜欢：真的
},
{
_id:“5b21ca3eeb7f6fbccd47181b”，
标题：“婚礼破坏者”，
类型：{u id:“5b21ca3eeb7f6fbccd471814”，名称：“喜剧”}，
库存数量：7，
Dailrentalrate:3.5，
喜欢：错
},
{
_id:“5b21ca3eeb7f6fbccd47181e”，
标题：“逝去的女孩”，
类型：{u id:“5b21ca3eeb7f6fbccd471820”，名称：“Thriller”}，
库存数量：7，
Dailrentalrate:4.5，
喜欢：错
},
{
_id:“5b21ca3eeb7f6fbccd47181f”，
标题：“第六感”，
类型：{u id:“5b21ca3eeb7f6fbccd471820”，名称：“Thriller”}，
库存数量：4，
Dailrentalrate:3.5，
喜欢：真的
},
{
_id:“5b21ca3eeb7f6fbccd471821”，
标题：“复仇者”，
体裁：{u id:“5b21ca3eeb7f6fbccd471818”，名称：“动作”}，
库存数量：7，
Dailrentalrate:3.5，
喜欢：错
}
]
}  
handleDelete=（电影）=>{
console.log（“电影已删除”）
};
render（）{
报税表（
在数据库中显示9部电影

标题
体裁
股票
比率
行动
{this.state.movies.map（movie=>(
{movie.title}
{电影类型}
{movie.numberInStock}
{movie.dailrentalrate}
this.handleDelete（电影）}type=“button”className=“btn btn danger”>删除
))}
);
}
}
导出默认电影；

{movie.genre}

体裁是一个客体。您无法渲染它。
将其更改为

{movie.genre.name}

应该可以使用。

{movie.genre}

体裁是一个客体。您无法渲染它。

---

将其更改为

{movie.genre.name}

，应该可以使用。

尝试

{movie.genre.name}

。如果始终是字符串，则可以将其用作react节点。请尝试

{movie.genre.name}

。如果始终是字符串，则可以将其用作react节点。

<td>{movie.genre}</td>