在 React 中渲染对象

Question

我想渲染对象“流派”，但我的控制台 returns 给我：

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 {genre}})}

不起作用

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

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

这两个东西有什么区别？

Answer 1

第一个代码 return 是一个对象，键为“genre”，其值为 genere 值，react 无法渲染它。

第二个return genre 的值，因为这里的大括号不是对象大括号，而是在react html 中把变量放在里面的正确语法。

如果你想 return 没有 li 的值，请执行：{genres.map(genre=> genre)}

Answer 2

这一行

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

returns 一个对象，数组中的每个项目：{ genre: 'drama' }

然而，这条线

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

li 的 JSX 中的 { 不会将其转换为对象，但会访问其值：<li>drama</li>

在 React 中渲染对象

Render object in React

javascript

render

reactjs