React页面刷新后数据丢失求助（useParams相关）

核心问题 #

1. 初始状态类型错误：把book初始化为空数组[]，但Google Books API返回的是单个图书对象，空数组在book ?判断中属于真值，会直接进入渲染逻辑，此时book.volumeInfo不存在，触发报错导致组件崩溃。
2. 缺少空值安全访问：渲染时直接访问book.volumeInfo.title等嵌套属性，未处理数据未加载或请求失败的情况，一旦报错会导致组件无法正常执行后续更新。
3. 错误处理不完整：catchErrors的调用方式可能未正确捕获异步请求错误，导致请求失败后状态未更新，组件一直卡在错误状态。

修复步骤 #

1. 修正初始状态类型

将book的初始状态改为null，让book ?判断能正确区分“未加载/加载失败”和“已加载”状态：

const [book, setBook] = useState(null); // 替换原有的[]

2. 添加空值安全访问与格式修正

使用可选链?.避免属性访问报错，同时修正React中class需改为className的语法问题：

<StyledBookInfo>
  <h2>{book.volumeInfo?.title || '无标题'}</h2>
  <h3>By {book.volumeInfo?.authors?.join(', ') || '未知作者'}</h3>
  <div className="flex-cont">
    <img
      src={book.volumeInfo?.imageLinks?.thumbnail || 'https://via.placeholder.com/128x192?text=No+Cover'}
      alt={book.volumeInfo?.title || '图书封面'}
      className="cover"
    />
    <p className="description">
      {book.volumeInfo?.description?.replace(/<\/?[^>]+(>|$)/g, "") || '暂无简介'}
    </p>
  </div>          
  <p>{book.volumeInfo?.pageCount != null ? `${book.volumeInfo.pageCount} pages` : '页数未知'}</p>
</StyledBookInfo>

3. 完善异步请求的错误处理

确保请求失败时能重置状态，避免组件卡住：

useEffect(() => {
  const fetchData = async () => {
    try {
      const { data } = await getBookById(id);
      setBook(data);
    } catch (err) {
      console.error('获取图书信息失败:', err);
      setBook(null); // 请求失败时重置状态，触发错误提示
    }
  };
  fetchData();
}, [id]);

如果catchErrors是自定义错误处理工具，需确保它接收异步函数而非直接调用后的Promise：

catchErrors(async () => {
  const { data } = await getBookById(id);
  setBook(data);
});

4. 可选：添加加载状态提示

在数据加载过程中显示加载信息，提升用户体验：

return (
  <>
    {book === null ? (
      <p>加载中...</p>
    ) : book ? (
      <>
        <p>Keep reading:</p>
        <StyledBookInfo>
          {/* 上面修正后的图书内容 */}
        </StyledBookInfo>
      </>
    ) : (
      <p>There is NO book</p>
    )}
  </>
);

临时恢复操作的原理 #

移除book相关代码刷新后再粘贴，相当于重置了组件的错误状态与生命周期，让组件重新执行useEffect发起请求，所以能临时恢复，但未解决根本问题，因此会重复出现报错。

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