第 18 课：刷新失败显示内联提示

日期：2026-09-23
课程序号：第 18 课
知识点：失败反馈与上次成功时间并存

用途或适用场景

刷新失败后，列表旁保留可见提示，同时继续显示上次成功刷新时间。

核心概念

失败提示只记录最近一次刷新操作的界面反馈；lastSuccess 仍只在 load() 成功后更新。

最小代码或操作示例

tsx

const [errorMessage, setErrorMessage] = useState('');
async function reload() {
  setRefreshing(true);
  setErrorMessage('');
  try { await load(); setLastSuccess(new Date()); }
  catch {
    Alert.alert('刷新失败，请重试');
    setErrorMessage('刷新失败，请重试');
  }
  finally { setRefreshing(false); }
}
<Text>{lastSuccess ? `上次成功：${lastSuccess.toLocaleTimeString()}` : '尚未成功刷新'}</Text>
{errorMessage ? <Text>{errorMessage}</Text> : null}

3～5 分钟练习

先成功刷新一次，再让下一次刷新失败。

参考答案

旧的成功时间仍显示，下面新增“刷新失败，请重试”；再次成功刷新后提示清空。

与上一课的联系

沿用第 17 课的 reload、lastSuccess、已命名的重试按钮、Alert 与 Text；本课只新增最近一次失败的内联反馈，保留原有弹窗与成功时间的更新条件；完成后下一课可让内联提示向辅助技术声明它是警告。

时效校验

时效校验：2026-09-24（React Native 当前 Text 文档与 React useState 文档；未见本课用法的废弃标记）。