Next.js 15 Fullstack Web Apps · 课时

渲染列表、键与条件式 UI

使用 map 渲染动态集合，选择正确的键，并有条件地显示或隐藏 UI——掌握 React 界面开发中的日常基础。

渲染列表、键与条件式 UI 是 CoddyKit 上的免费 Next.js 15 Fullstack Web Apps 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Next.js 15 Fullstack Web Apps 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Next.js 15 Fullstack Web Apps 课程共包含 4 节课。

本课时的部分内容尚未翻译，以英文显示。

Rendering Collections

UIs constantly display lists: products, comments, search results. In React you turn an array of data into an array of elements, usually with Array.map.

Mapping an Array

Inside JSX you call map and return one element per item. React renders the resulting array directly.

const items = ['Apple', 'Banana', 'Cherry'];
function List() {
  return (
    <ul>
      {items.map((fruit) => <li>{fruit}</li>)}
    </ul>
  );
}

Why Keys Matter

React needs to track which item is which between renders. A key is a stable, unique identifier per item that lets React reuse, reorder, or remove elements efficiently instead of rebuilding everything.

Adding Keys

Pass a key prop, ideally a stable id from your data — not the array index, which breaks when items move.

{users.map((user) => (
  <li key={user.id}>{user.name}</li>
))}

The Index Key Pitfall

Using the array index as a key seems easy but causes bugs when the list is reordered or filtered: React reuses the wrong DOM node and component state attaches to the wrong item. Prefer a real unique id.

Conditional Rendering with &&

To render something only when a condition is true, use the logical AND operator. If the left side is falsy, nothing renders.

function Inbox({ count }) {
  return (
    <div>
      {count > 0 && <span>You have {count} messages</span>}
    </div>
  );
}

Ternary for Either/Or

When you must show one of two things, use a ternary expression directly in JSX.

function Status({ online }) {
  return <p>{online ? 'Online' : 'Offline'}</p>;
}

Early Returns

For larger branches, return early from the component. This keeps the main JSX clean.

function Profile({ user }) {
  if (!user) return <p>Loading...</p>;
  return <h1>{user.name}</h1>;
}

Beware the Zero Trap

Using && with a number is risky: if the value is 0, React renders the literal 0 instead of nothing. Convert to a boolean first.

{messages.length > 0 && <List />}   // safe
{messages.length && <List />}        // BUG: renders 0

Filtering and Mapping Together

You often filter then map to render a subset. Chain the array methods before returning elements.

{products
  .filter((p) => p.inStock)
  .map((p) => <Card key={p.id} product={p} />)}

Empty States

Always handle the empty case. Show a friendly message when a list has no items rather than rendering a blank area.

{items.length === 0
  ? <p>No results found</p>
  : items.map((i) => <Row key={i.id} {...i} />)}

Quick Check

Test your list-rendering knowledge.

Recap

You learned core rendering patterns:

Use map to turn data arrays into elements
Give each item a stable, unique key (not the index)
Render conditionally with &&, ternaries, or early returns
Watch the zero trap and always handle empty states

常见问题解答

「渲染列表、键与条件式 UI」课时是免费的吗？

是的 — 「渲染列表、键与条件式 UI」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Next.js 15 Fullstack Web Apps 课程的其余内容，请升级到 CoddyKit PRO。 Next.js 15 Fullstack Web Apps 课程共包含 4 节课。

「渲染列表、键与条件式 UI」这节课中我会学到什么？

使用 map 渲染动态集合，选择正确的键，并有条件地显示或隐藏 UI——掌握 React 界面开发中的日常基础。你通过在浏览器中直接运行的动手代码来练习 Next.js 15 Fullstack Web Apps，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Next.js 15 Fullstack Web Apps 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Next.js 15 Fullstack Web Apps 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「渲染列表、键与条件式 UI」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Next.js 15 Fullstack Web Apps 课中编写并运行代码吗？

能。每节 Next.js 15 Fullstack Web Apps 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Next.js 15 Fullstack Web Apps