React传递函数类型prop时值为undefined的解决方法

排查方向与对应修复方式 #

• 修正组件命名大小写问题：React强制要求自定义组件名、JSX中渲染的自定义组件标签必须首字母大写。你当前父组件定义为function page()（首字母小写），如果渲染时也写为<page />会被React识别为原生DOM标签，不会按自定义组件逻辑处理状态绑定、props传递，直接导致子组件拿不到传入值。需要把父组件名改为Page，渲染Sidebar时也保持首字母大写为<Sidebar />，不要写成<sidebar />。
• 确认组件导入导出匹配：检查Sidebar的引入路径、导出/导入方式完全对应，比如Sidebar是默认导出就不要用花括号命名导入，避免引入了空组件/错误组件导致props传递链路断裂。
• 校验prop名拼写一致性：JS是大小写敏感语言，确认传参、接参的prop名完全一致，比如传Callback和接callback会被识别为两个不同属性，你当前代码里传callback、解构接callback的写法本身没有语法问题，需要排查运行时代码有没有意外的拼写改动。
• 检查中间层props透传：如果Sidebar外层包裹了memo、forwardRef或者自定义高阶组件，确认中间层没有拦截props，需要把所有外部传入的props完整透传给实际渲染的Sidebar组件。
• 增加兜底容错：子组件解构props时可以给callback加默认空函数，避免漏传时调用报错，写法为const Sidebar = ({ callback = () => {}, state }:any) => {}。
• 快速定位技巧：在父组件return语句前打印handleToggle确认函数本身已正常生成，在子组件首行打印接收到的所有props，快速定位是函数未生成还是传递过程中丢失。

修正后的可运行示例代码 #

父组件Page #

import Sidebar from './Sidebar';
import React from 'react';

// 组件名首字母大写
function Page() {
  const [open, setOpen] = React.useState(false);

  // 改为函数式更新，规避闭包导致的状态更新异常（非undefined问题，属于toggle逻辑优化）
  const handleToggle = () => {
    setOpen(prev => !prev);
  };

  return (
    <div>
      {/* 组件标签首字母大写 */}
      <Sidebar state={open} callback={handleToggle} />
    </div>
  );
}

export default Page;

子组件Sidebar #

const Sidebar = ({ callback = () => {}, state }) => {
  return (
    <div>
      <button onClick={callback}>切换侧边栏状态</button>
      <div>当前侧边栏状态：{state ? '展开' : '收起'}</div>
    </div>
  );
};

export default Sidebar;

注意：不建议长期给组件props写any类型，使用TS时可以明确定义props类型，传参错误时IDE会直接给出提示，减少低级问题排查成本。

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