如何在React中通过Props渲染JSON中的列表数据

你想在React中展示JSON数据，需要把subjects数组渲染为列表，但不确定该在传递Props前还是之后做map操作，以下是问题分析和解决方案：

你的现有代码 #

JSON数据 #

[
  {
    "id": 145,
    "title": "Middlemarch",
    "authors": [
      {
        "name": "Eliot, George",
        "birth_year": 1819,
        "death_year": 1880
      }
    ],
    "translators": [],
    "subjects": [
      "Bildungsromans",
      "City and town life -- Fiction",
      "Didactic fiction",
      "Domestic fiction",
      "England -- Fiction",
      "Love stories",
      "Married people -- Fiction",
      "Young women -- Fiction"
    ],
    "bookshelves": ["Best Books Ever Listings", "Historical Fiction"],
    "languages": ["en"],
    "copyright": false,
    "media_type": "Text",
    "formats": {
      "application/x-mobipocket-ebook": "https://www.gutenberg.org/ebooks/145.kf8.images",
      "application/epub+zip": "https://www.gutenberg.org/ebooks/145.epub3.images",
      "text/html": "https://www.gutenberg.org/ebooks/145.html.images",
      "application/octet-stream": "https://www.gutenberg.org/files/145/145-0.zip",
      "text/plain": "https://www.gutenberg.org/ebooks/145.txt.utf-8",
      "image/jpeg": "https://www.gutenberg.org/cache/epub/145/pg145.cover.medium.jpg",
      "text/plain; charset=us-ascii": "https://www.gutenberg.org/files/145/145-0.txt",
      "application/rdf+xml": "https://www.gutenberg.org/ebooks/145.rdf"
    },
    "download_count": 165079
  }
]

组件接收Props代码 #

<Typography id="spring-modal-title" variant="h5" component="h2">
  Title: {props.title}
</Typography>
<Typography id="spring-modal-title" variant="h5" component="h2">
  Author: {props.author}
</Typography>
<Typography id="spring-modal-title" variant="h6" component="h2">
  Language: {props.language}
</Typography>
<Typography id="spring-modal-description" sx={{ mt: 2 }}>
  <ul>
    Genre: {props.subjects}
  </ul>
</Typography>

传递Props时的尝试代码 #

<BookModal 
  title={book.title}
  author={book.authors[0].name}
  subjects={[book.subjects].map((s)=>(
    <li>s</li>
  ))}
  language={languageAbbr[book.languages]??book.languages}
  description= {book.title}
/>

问题修正与解决方案 #

你当前传递Props的代码有两个问题：

1. [book.subjects]把原数组包裹成了二维数组，map时的s是整个原数组而非单个元素
2. <li>s</li>里的s没加花括号，会直接显示字符串s而非变量值

两种实现方式都可行，推荐在组件内部处理map，理由是组件职责更清晰、复用性更强：

方案1：组件内部处理（推荐） #

• 传递Props时直接传入原始数组：

<BookModal 
  title={book.title}
  author={book.authors[0].name}
  subjects={book.subjects} {/* 直接传数组 */}
  language={languageAbbr[book.languages]??book.languages}
  description={book.title}
/>

• 组件内渲染列表：

<Typography id="spring-modal-description" sx={{ mt: 2 }}>
  Genre:
  <ul>
    {/* 组件内map生成列表项 */}
    {props.subjects.map((subject, index) => (
      <li key={index}>{subject}</li>
    ))}
  </ul>
</Typography>

方案2：传递Props前处理 #

• 修正传递时的map逻辑：

<BookModal 
  title={book.title}
  author={book.authors[0].name}
  subjects={book.subjects.map((s, index) => (
    <li key={index}>{s}</li> {/* 直接生成列表项，加key和变量插值 */}
  ))}
  language={languageAbbr[book.languages]??book.languages}
  description={book.title}
/>

• 组件内直接渲染：

<Typography id="spring-modal-description" sx={{ mt: 2 }}>
  Genre:
  <ul>
    {props.subjects} {/* 直接渲染已生成的列表项 */}
  </ul>
</Typography>

注意：React列表渲染必须给每个子项加唯一key，这里用index是简单方案，如果subjects有唯一标识（比如不存在重复项时也可以用subject本身），尽量用更稳定的key值。

内容的提问来源于stack exchange，提问作者user20047387