Amplify/NextJS动态链接参数JSON解析失败及多次调用问题排查

问题1：取消JSON.parse(params)后router.query参数变为undefined #

• JSON解析报错中断代码执行：如果params不是合法的JSON字符串，JSON.parse()会直接抛出错误，打断后续代码逻辑，最终导致router.query里的参数显示为undefined。建议先加校验和异常捕获：

  if (params) {
    try {
      const parsed = JSON.parse(params);
      // 你的业务逻辑
    } catch (err) {
      console.error('params解析失败:', err);
    }
  }
  

• 路由参数获取时机不对：Next.js动态路由的router.query在组件首次渲染时可能是空的（路由还没完全解析完成）。如果直接在组件初始化阶段就执行JSON.parse，会因为params为空报错，进而影响后续参数读取。可以用useEffect监听router.query的变化，确保拿到有效值再处理：

  import { useRouter } from 'next/router';
  import { useEffect } from 'react';
  
  export default function DynamicPage() {
    const router = useRouter();
    const { id, params } = router.query;
  
    useEffect(() => {
      if (params) {
        try {
          const parsed = JSON.parse(params);
          console.log('解析后参数:', parsed);
        } catch (err) {
          console.error('解析出错:', err);
        }
      }
    }, [router.query]);
  
    return <div>页面内容</div>;
  }
  

• 参数传递未编码：如果URL里的params包含特殊字符（比如引号、空格），会破坏JSON格式，导致解析失败。跳转页面时记得用encodeURIComponent编码参数：

  const paramData = JSON.stringify({ a: 1, b: 2 });
  router.push(`/your-page/${encodeURIComponent(paramData)}`);
  

问题2：单次点击多次调用[id].js中的函数 #

• 开发环境热重载特性：Next.js开发模式下会开启热模块替换（HMR），修改代码后会自动重新渲染组件，可能导致函数多次执行，这个问题在生产环境会自动消失。
• useEffect依赖项不合理：如果useEffect的依赖数组包含频繁变化的值，或者依赖数组为空但内部用到了外部变量，会触发多次执行。检查依赖数组，只保留必要的依赖：

  useEffect(() => {
    // 你的函数逻辑
  }, [router.query]); // 仅监听router.query变化，避免不必要触发
  

• 组件不必要重渲染：如果父组件或页面的状态频繁变动，会带动动态页面组件多次重渲染，进而触发内部函数执行。可以用React.memo包裹组件，减少无意义的重渲染：

  import { memo } from 'react';
  
  const DynamicPage = memo(() => {
    // 组件内容
  });
  
  export default DynamicPage;
  

• 事件函数重复创建：如果在组件内部直接写onClick={() => { ... }}，每次渲染都会生成新的函数实例，可能导致多次触发。用useCallback缓存函数即可：

  import { useCallback } from 'react';
  
  const handleClick = useCallback(() => {
    // 点击逻辑
  }, []);
  
  return <button onClick={handleClick}>触发操作</button>;
  

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