React中使用useParams获取URL id后无法匹配对应项求助

核心问题分析 #

1. 类型不匹配：useParams 获取的 id 是字符串类型，而 index + 1 是数字类型，使用严格相等 === 永远无法匹配到目标项，导致selectedItem始终为undefined。
2. 依赖缺失：useEffect 的依赖数组为空，当路由参数id变化时，不会重新发起请求匹配新的内容。
3. 初始状态不合理：item初始设为数组[]，数组属于真值，初始渲染时会尝试访问item.Fname，引发无意义的属性访问错误。

修复后的完整代码 #

状态与请求逻辑

const { id } = useParams();
// 初始设为null，避免初始渲染的属性访问错误
const [item, setItem] = useState(null);
// 单独维护加载状态，逻辑更清晰
const [loading, setLoading] = useState(true);

useEffect(() => {
  // 将路由参数id转为数字，确保类型一致
  const targetId = Number(id);
  
  fetch("https://.../V1/homepage/consts_list_homepage")
    .then((response) => {
      // 先校验请求是否成功
      if (!response.ok) throw new Error('数据请求失败');
      return response.json();
    })
    .then((data) => {
      // 匹配index+1等于目标id的项
      const selectedItem = data.data.find((_, index) => index + 1 === targetId);
      setItem(selectedItem);
    })
    .catch((error) => {
      console.error('加载出错:', error);
      setItem(null);
    })
    .finally(() => {
      // 无论成功失败，结束加载状态
      setLoading(false);
    });
// 依赖数组添加id，id变化时重新执行请求
}, [id]);

渲染代码

<h2 className="drname">
  {loading 
    ? "Loading..." 
    : item 
      ? `${item.Fname} ${item.Lname}` 
      : "未找到对应内容"}
</h2>

关键修复点说明 #

• 类型统一：通过Number(id)将字符串类型的路由参数转为数字，与index+1的类型保持一致，确保匹配逻辑生效。
• 依赖更新：将id加入useEffect的依赖数组，保证路由参数变化时，能重新请求并匹配对应项。
• 加载状态独立：用单独的loading状态控制加载提示，避免依赖item的值导致的逻辑混乱，比如初始数组状态或错误状态下的异常显示。
• 错误处理增强：添加响应状态校验和错误捕获，出错时能明确日志，同时更新状态避免一直显示加载。

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