如何 return JSX 中的映射数组？

Question

我已经将一些虚拟数据（1000 object 部电影）导入到我的 React.js 组件中，我想渲染标题。

export const dummyData = [
  {
    id: 'tt0111161',
    rank: '1',
    title: 'The Shawshank Redemption',
  }

我已经用整个 object 创建了一个数组，我想放映前 3 部电影。

const likedFilms = [];
for (let i = 0; i < 3; i++) {
    likedFilms.push(dummyData);
}

我遇到的问题是渲染标题。

我试过用这个。没有。不确定如何访问此数据...

return (
        <div>
    {likedFilms.map((likedFilm) => <p>TITLE: {likedFilms.title} </p>)}
 </div> )

or TITLE: {this.likedFilms.title}

映射确实有效，因为它向我显示：标题：标题：标题：

但它没有呈现标题。

Answer 1

编辑您的 return，您正在访问 likedFilmS 而不是 likedFilm，在示例中我已将名称更改为 film

{likedFilms.map(film => <p>TITLE: {film.title} </p>)}

Answer 2

{likedFilms.map((likedFilm) => <p>TITLE: {likedFilm.title} </p>)}

likedFilmed 是数组的名称，而 likedFilm 是迭代时数组中每个项目的名称。所以在地图的 return 中，您想要访问单个项目的属性 likedFilm.title 而不是 likedFilms

我还建议给 p 元素一个键来摆脱 React 的控制台警告；所以假设电影片名是唯一的，它将变成

{likedFilms.map((likedFilm) => <p key={likedFilm.title}>TITLE: {likedFilm.title} </p>)}

How to return a mapped array in JSX?