React函数组件使用props.match.params访问props时遇未定义错误

问题原因 #

1. 异步数据加载时机问题：父组件中myState初始值为空数组，子组件首次渲染时API请求还未完成，此时访问props.myState[props.match.params.id].src会因为数组为空导致对应索引项为undefined，进而触发TypeError。
2. 笔误错误：子组件的img标签中错误使用了props.blurbs，但父组件传递的属性是myState，这会直接导致访问不存在的属性报错。
3. 索引类型不严谨：props.match.params.id是字符串类型，虽然数组支持字符串索引，但转为数字类型能避免潜在的索引匹配问题。
4. useEffect依赖缺失：子组件的useEffect没有设置依赖项，会在每次渲染时执行，造成不必要的资源消耗。

修复后的Child.js代码 #

const Child = (props) => {
  // 解构props，简化代码
  const { myState, match } = props;
  // 将路由参数id转为数字类型
  const itemId = Number(match.params.id);
  // 获取当前要展示的项
  const currentItem = myState[itemId];

  // 仅在myState或itemId变化时执行日志输出
  useEffect(() => {
    console.log(myState);
    console.log(itemId);
    console.log(currentItem);
    if (currentItem) {
      console.log(currentItem.src);
    }
  }, [myState, itemId]);

  // 数据未加载完成或当前项不存在时，显示加载提示
  if (!myState.length || !currentItem) {
    return <div>加载中...</div>;
  }

  // 渲染图片，使用正确的props属性
  return (
    <img src={currentItem.src} alt="内容图片" />
  );
};

关键修复点说明 #

• 空状态处理：通过!myState.length || !currentItem判断数据是否就绪，避免在数据加载完成前访问undefined的属性。
• 修正笔误：将img标签中的props.blurbs替换为正确的currentItem（对应props.myState的项）。
• 索引类型转换：把字符串类型的路由id转为数字，确保数组索引匹配准确。
• 优化useEffect：添加依赖项[myState, itemId]，让副作用仅在必要时执行。
• 用户体验优化：增加加载状态提示，避免页面空白或报错。

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