在 react 中，函数组件接收的唯一参数是 `props` 对象，而非多个独立参数；若直接解构为多个形参（如 `(contactinfo, runserverless)`），会导致仅第一个参数接收全部 props，其余形参为 `undefined`，从而无法访问传入的函数。
React 函数组件的设计原则是：所有传入的 props 都会合并为一个单一的 props 对象，并作为第一个且唯一的参数传入组件。因此，以下写法是错误的：
// ❌ 错误：将 props 拆成多个参数，实际只有 contactInfo 接收到整个 props 对象
export const VaultEntry = (contactInfo, runServerless) => {
console.log(runServerless); // undefined！
return <div>...</div>;
};此时 contactInfo 实际上等于 { contactInfo: userData, runServerless: runServerlessFn }，而 runServerless 参数根本未被赋值，始终为 undefined。
✅ 正确做法有以下两种：
方式一：接收 props 对象，再通过点语法访问
shopify-app-react-router
下载
构建 Shopify 嵌入式应用（Embedded App）的开发技能：基于 @shopify/shopify-app-react-router + React Router v7 + Admin API 2026-04。覆盖 shopifyApp 配置、authenticate.admin 的 GraphQL/REST 调用、Webhook 校验、Session 存储、订阅计费、App Bridge 导航、部署，并新增：适用场景判断、安全最佳实践、错误处理与容错、最佳实践、常见问题 FAQ、高级场景。G
export const VaultEntry = (props) => {
console.log(typeof props.runServerless); // "function"
console.log(props.contactInfo); // { userData... }
// 可安全调用
// props.runServerless();
return <div>...</div>;
};方式二：使用解构语法，在参数声明时直接提取所需字段（推荐）
export const VaultEntry = ({ contactInfo, runServerless }) => {
console.log(typeof runServerless); // "function"
console.log(contactInfo); // 已解构出的 userData
// ✅ 现在可直接调用
// runServerless();
return <div>...</div>;
};⚠️ 注意事项：
- 解构时务必确保属性名与父组件传递的 prop 名完全一致（区分大小写，如 runServerless ≠ runserverless）；
- 若不确定 props 结构，可在组件开头加 console.log(props) 快速验证；
- TypeScript 用户建议为组件添加 Props 类型定义，避免运行时属性访问错误；
- 不要混淆类组件的 this.props 写法——函数组件中不存在 this，一切依赖 props 参数。
总结：React 函数组件不是多参数函数，而是单参数（props）函数。牢记这一基本契约，就能避免 90% 的 props 丢失问题。
