如何在JS函数组件中同时使用Props与用户Token解决报错问题

我正在实现一个可动态修改用户元数据（如密码）的Dialog组件：点击Profile视图按钮时，通过props指定修改类型（如"Password"），Dialog会根据类型渲染对应内容，再使用用户Token调用Supabase密码重置接口。

当前遇到的问题：

• pwrecovery函数触发**"Cannot read properties of undefined (reading 'email')"**错误
• 尝试解构token后，报错变为**"Cannot read properties of undefined (reading 'user')"**
• 其他组件（如Profile）通过相同方式传递token却能正常运行

相关场景：登录时将Supabase返回数据存入token状态，App.js通过路由向ChangeRequestDialog传递该token。

1. 确认路由传参的正确性 #

先检查App.js中路由传递token的逻辑：

• 如果用React Router的state传参：

// 跳转示例（Link方式）
<Link to="/change-request" state={{ token: tokenState }}>修改密码</Link>

// 跳转示例（navigate方式）
navigate('/change-request', { state: { token: tokenState } })

在ChangeRequestDialog中要正确获取路由state，建议用可选链避免undefined报错：

import { useLocation } from 'react-router-dom';

const ChangeRequestDialog = () => {
  const location = useLocation();
  const token = location.state?.token;
  // ...后续逻辑
}

• 如果是直接通过路由组件props传参：

// 路由配置示例
<Route path="/change-request" element={<ChangeRequestDialog token={tokenState} />} />

需确保tokenState在路由渲染时已有值，避免初始渲染阶段token为undefined。

2. 对齐Profile组件的token处理逻辑 #

对比Profile组件中处理token的代码，保持Dialog的解构逻辑一致：

// Profile组件的token处理参考
const { user } = token;
const email = user.email;

在Dialog中必须先判断token的存在性，再进行解构：

const pwrecovery = async () => {
  // 先校验token和user是否存在，避免报错
  if (!token?.user) return;
  
  const { email } = token.user;
  // 调用Supabase重置接口
  const { error } = await supabase.auth.resetPasswordForEmail(email, {
    redirectTo: `${window.location.origin}/update-password`
  });
  
  if (error) {
    // 处理错误逻辑
    console.error(error);
  }
}

3. 控制Dialog的渲染时机 #

如果Dialog通过open状态控制显示，确保token存在后再渲染组件：

// 父组件中控制Dialog渲染
{token && <ChangeRequestDialog open={open} token={token} />}

或者在Dialog内部做前置判断：

const ChangeRequestDialog = ({ token }) => {
  if (!token) {
    return <div>加载中...</div>;
  }
  
  // 正常渲染Dialog内容
  return (
    <Dialog open={open}>
      {/* 表单与逻辑 */}
    </Dialog>
  )
}

4. 调试token的实际值 #

在Dialog组件中添加日志，确认接收到的token结构与Profile组件一致：

console.log('Dialog接收的token:', token);

对比Profile组件的日志输出，排查是否存在传参过程中token被修改、丢失的情况。

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