本文详解 React 中“子传父”通信的核心模式：通过状态提升（state lifting）将 useState 的 setter 函数逐层向下传递，并确保函数 props 正确绑定与调用，避免 TypeError: props.xxx is not a function 错误。
本文详解 react 中“子传父”通信的核心模式：通过状态提升（state lifting）将 `usestate` 的 setter 函数逐层向下传递，并确保函数 props 正确绑定与调用，避免 `typeerror: props.xxx is not a function` 错误。
在 React 应用中，数据流默认是自上而下的（父 → 子），但实际开发中常需实现“子 → 父”反馈，例如点击侧边栏分类项后，将 categoryId 通知到顶层页面组件并触发数据重载。该需求的本质是 状态提升（Lifting State Up）：将共享状态及其更新逻辑统一托管在共同祖先组件中，再通过 props 分发给各层级子组件。
✅ 正确做法：状态提升 + 函数透传
核心原则：setSelectedCategory 必须由最顶层需要响应变化的组件（即 CustomerPage）定义，并逐级作为 prop 传入 Layout 和 SideNav。
1. 在 CustomerPage 中定义状态与 setter
// customer.js
const CustomerPage = () => {
const [selectedCategory, setSelectedCategory] = useState(0);
// 关键：将 setter 和当前值传给 Layout
return (
<Layout
selectedCategory={selectedCategory}
setSelectedCategory={setSelectedCategory}
>
{/* 页面内容 */}
</Layout>
);
};
// 保持 getLayout 配置简洁（若使用 Next.js App Router，此方式已过时；如为 Pages Router，请确保正确包裹）
CustomerPage.getLayout = (page) => (
<CustomerPage>
{page}
</CustomerPage>
);
export default CustomerPage;2. 在 Layout 中透传 setter 给 SideNav
// layout.js
export const Layout = ({ children, selectedCategory, setSelectedCategory }) => {
// ... 其他逻辑（openNav、useEffect 等）
return (
<>
<TopNav onNavOpen={() => setOpenNav(true)} />
<SideNav
open={openNav}
onClose={() => setOpenNav(false)}
selectedCategory={selectedCategory}
setSelectedCategory={setSelectedCategory} // ✅ 直接透传，不加工
/>
<LayoutRoot>
<LayoutContainer>
{React.cloneElement(children, { selectedCategory })}
</LayoutContainer>
</LayoutRoot>
</>
);
};3. 在 SideNav（或其子组件 SideNavItem）中安全调用
// side-nav.js
{categories.map(category => (
<SideNavItem
key={category.id}
title={category.name}
onClick={() => {
console.log("Selected category ID:", category.id);
// ✅ 确保 setSelectedCategory 已被正确传入且为函数
if (typeof props.setSelectedCategory === 'function') {
props.setSelectedCategory(category.id);
} else {
console.warn("setSelectedCategory is not a function — check prop wiring");
}
}}
/>
))}⚠️ 常见错误与修复要点
-
错误根源：props.setSelectedCategory is not a function
通常因以下任一原因导致：- CustomerPage 未定义 setSelectedCategory，或未将其传入 Layout；
- Layout 未将 setSelectedCategory 透传给 SideNav；
- SideNav 组件内部未正确接收并向下传递该 prop（如遗漏 ...props 或拼写错误）；
- 使用了 getLayout 静态方法但未正确绑定 setSelectedCategory（尤其在 Next.js Pages Router 中，page.props 并非响应式来源，不应依赖它传递 setter）。
-
字符串插值错误（见原代码）：
// ❌ 错误：单引号不支持 ${} 插值 url = 'http://localhost:8282/product/category/${selectedCategory}' // ✅ 正确：使用模板字符串（反引号） url = `http://localhost:8282/product/category/${selectedCategory}` 副作用逻辑优化建议：
useEffect 中同时发起多个 fetch 请求时，应考虑添加 AbortController 防止组件卸载后更新状态；对 selectedCategory === 0 的判断建议改用 !selectedCategory（更健壮），并统一初始 URL。
? 调试技巧
- 在每个使用 setSelectedCategory 的组件中添加校验日志：
console.log("In SideNav, setSelectedCategory type:", typeof props.setSelectedCategory); - 使用 React DevTools 检查组件 props 树，确认 setSelectedCategory 是否真实存在且为函数类型；
- 避免在 getLayout 中动态构造带 setter 的布局——该方法仅用于静态包装，状态管理必须在组件渲染树内完成。
通过严格遵循“状态提升 + 单向函数透传”模式，即可稳健实现跨多层组件的子传父通信，消除运行时类型错误，构建可维护的数据流架构。
