渲染：React 根据当前数据选择画面

一句话理解

渲染就是“现在该显示什么”。React 不会凭空知道页面该变成哪一种状态，它只会按照你写的条件，用当前数据选一个画面。

一个请求会有四种画面

正在请求       显示“加载中”
请求失败       显示错误信息
请求成功但没数据 显示“还没有留言”
请求成功且有数据 显示留言列表

对应代码：

if (isLoading) return <p>正在读取留言...</p>
if (error) return <p>读取失败：{error}</p>
if (messages.length === 0) return <p>还没有留言</p>

return <MessageList messages={messages} />

按顺序读：先判断是否加载，再判断是否出错，再判断数组是否为空。前面的条件成立后已经 return，后面的代码不会继续执行。

&&：条件成立才显示

{isSaving && <p>正在发布...</p>}

读作：“如果 isSaving 是真，就显示这段文字。”

适合只有“显示或不显示”两种选择的场景。

三元表达式：二选一

{isLoggedIn ? <LogoutButton /> : <LoginButton />}

条件 ? 条件为真时显示的内容 : 条件为假时显示的内容

适合明确的二选一。嵌套很多层时会难读，改用前面的 if 更清楚。

map：把每条数据变成一张卡片

{messages.map((message) => (
  <MessageCard key={message.id} message={message} />
))}

真实过程：

messages               留言数组
.map                    逐个处理数组里的每一项
(message)               当前正在处理的一条留言
=>                      用这条留言生成右边的内容
<MessageCard ... />     最终生成一张留言卡片
key={message.id}        给这张卡片一个稳定身份证
message={message}       把整条留言通过 props 交给卡片

key 优先使用数据库里的真实唯一 ID。排序或删除时，数组下标会变化，不适合作为稳定身份证。

有数据但页面空白，怎么查

1. 在 Network 的 Preview 确认后端返回的是数组还是对象。
2. 在渲染前打印 messages。
3. 如果报 messages.map is not a function，说明它根本不是数组。
4. 如果后端返回 { items: [...] }，应该把 data.items 存进 state，而不是整个 data。
5. 检查条件是不是写反，例如有数据时反而提前 return 空状态。

一个具体错误

后端返回：

{ "messages": [{ "id": "m101", "text": "你好" }] }

错误写法：

setMessages(data)

正确读取：

setMessages(data.messages)

因为能 .map() 的是里面的数组，不是外层对象。

自己试试

打开一个列表页面，同时打开 Network。比较接口 Preview 和组件里的 .map()：接口数组藏在哪个字段里，组件实际对哪个变量调用 .map()，两边是否一致。

Console 报 messages.map is not a function，最可能说明什么？

答案：messages 当前不是数组。先看 Network 返回的数据结构，再确认存进 state 的是不是正确字段。