Javascript 在React中渲染对象

我想呈现对象“类型”，但我的控制台返回给我：

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

我的代码

function Movie({title,summary,year,poster,genres}){ 
    return(
        <div className="movie">
            {genres.map(genre=>{return {genre}})} //doesn't work
        {genres.map(genre=>{return <li>{genre}</li>})}
         </div>
    )
}

不起作用

但是下面的第二个代码运行良好

{genres.map(genre=>{returns <li>{genre}</li>})} 

{genres.map（genre=>{returns
{genre}
}

---

这两个东西之间有什么区别？

第一个代码返回一个带有键“genre”的对象，其值是genre值，react无法呈现它

第二个返回genre的值，因为这里的大括号不是对象大括号，而是在react中将变量放入html中的正确语法

如果要返回不带li的值，请执行以下操作：

{genres.map（genre=>genre）}

此行

{genres.map(genre=>{returns {genre}})}

从数组中的每个项目中返回一个对象：

{genre:'traic'}

然而，这是另一条线

{genres.map(genre=>{returns <li>{genre}</li>})} 

{genres.map（genre=>{returns
{genre}
}

---

的JSX中的

{

不会将其转换为对象，但会访问其值：

戏剧

本文详细解释了这一点，第一个是返回一个对象数组（

{genre}

使用创建一个对象）。第二个是返回一个

的数组{genres.join（“”）}
这个表达式返回未定义的数组，但是.genres.map（genre=>{return{genre}）它对我真的很有帮助。非常感谢
{genres.map(genre=>{returns <li>{genre}</li>})}