利用 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 缓存查找结果，避免不必要的重复计算。
代码示例
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;代码解释
- useParams(): 从 URL 中提取 id 参数。注意，id 通常是字符串类型，需要使用 parseInt() 转换为数字类型。
- useMemo(): useMemo 接收一个函数和一个依赖项数组作为参数。只有当依赖项数组中的值发生变化时，才会重新计算 farm 的值。这避免了在 FarmDetail 组件每次渲染时都重新查找农场对象，提高了性能。allFarms?.find((f) => f.id === id)使用了可选链式调用，避免了allFarms为null或undefined时报错。
- 条件渲染: 使用 if (!farm) 判断是否找到了对应的农场。如果未找到，则渲染一个提示信息，避免程序出错。
- 渲染农场信息: 如果找到了农场，则渲染农场的相关信息。
注意事项
- 确保 allFarms 数组已经加载完成，再渲染 FarmDetail 组件。可以使用条件渲染或 loading 状态来处理数据加载过程。
- useMemo 的依赖项数组非常重要。只有当依赖项发生变化时，才会重新计算缓存值。如果依赖项不正确，可能会导致缓存失效或无法及时更新。
- 在实际项目中，可能需要更复杂的过滤逻辑。可以根据实际情况调整 find() 方法的条件。
- 考虑错误处理，例如当 id 不是有效的数字时，应该给出相应的提示。
总结
通过使用 useParams 钩子和 useMemo，可以在 React SPA 项目中高效地利用初始状态数据过滤并渲染特定组件的数据，避免不必要的 API 请求，提升性能。同时，结合条件渲染可以处理数据缺失的情况，提供更友好的用户体验。
