利用 useParams 和初始状态过滤 React 组件数据

在 React 单页应用（SPA）中，经常需要在详情页面展示特定 ID 对应的数据。通常的做法是根据 URL 中的 ID 发起新的 API 请求。但如果已经通过一次请求获取了所有数据，直接在前端进行过滤可以避免额外的网络开销，提升性能。本文将介绍如何利用 react-router-dom 的 useParams 钩子，结合初始状态数据，高效地过滤并渲染特定组件的数据。

问题背景

假设有一个 SPA 应用，用于管理农场及其床位信息。在 FarmDetail 页面，需要根据 URL 中的农场 ID 展示该农场的详细信息。初始状态数据存储在 allFarms 变量中，并通过 react-router-dom 的 Link 组件导航到包含农场 ID 的路径。

解决方案

核心思路是使用 useParams 获取 URL 中的 ID，然后使用 Array.prototype.find() 方法在 allFarms 数组中查找匹配的农场对象。为了优化性能，可以使用 useMemo 缓存查找结果，避免不必要的重复计算。

代码示例

LLaMA

Meta公司发布的下一代开源大型语言模型

179

查看详情

import { useParams, Link } from "react-router-dom"; import { useMemo } from "react";  function FarmDetail({ allFarms }) {   let { id } = useParams();   id = parseInt(id);    // 使用 useMemo 缓存农场对象   const farm = useMemo(() => allFarms?.find((f) => f.id === id), [id, allFarms]);    // 条件渲染，处理未找到农场的情况   if (!farm) {     return <p className="alert warning">未找到农场</p>;   }    return (     <div>       <p>农场名称: {farm.name}</p>       <p>农场地址: {farm.address}</p>       {/* 更多农场信息 */}       <Link to="/">返回农场列表</Link>     </div>   ); }  export default FarmDetail;

代码解释

1. useParams(): 从 URL 中提取 id 参数。注意，id 通常是字符串类型，需要使用 parseInt() 转换为数字类型。
2. useMemo(): useMemo 接收一个函数和一个依赖项数组作为参数。只有当依赖项数组中的值发生变化时，才会重新计算 farm 的值。这避免了在 FarmDetail 组件每次渲染时都重新查找农场对象，提高了性能。allFarms?.find((f) => f.id === id)使用了可选链式调用，避免了allFarms为null或undefined时报错。
3. 条件渲染: 使用 if (!farm) 判断是否找到了对应的农场。如果未找到，则渲染一个提示信息，避免程序出错。
4. 渲染农场信息: 如果找到了农场，则渲染农场的相关信息。

注意事项

• 确保 allFarms 数组已经加载完成，再渲染 FarmDetail 组件。可以使用条件渲染或 loading 状态来处理数据加载过程。
• useMemo 的依赖项数组非常重要。只有当依赖项发生变化时，才会重新计算缓存值。如果依赖项不正确，可能会导致缓存失效或无法及时更新。
• 在实际项目中，可能需要更复杂的过滤逻辑。可以根据实际情况调整 find() 方法的条件。
• 考虑错误处理，例如当 id 不是有效的数字时，应该给出相应的提示。

总结

通过使用 useParams 钩子和 useMemo，可以在 React SPA 项目中高效地利用初始状态数据过滤并渲染特定组件的数据，避免不必要的 API 请求，提升性能。同时，结合条件渲染可以处理数据缺失的情况，提供更友好的用户体验。