Storybook中DatePick组件报错onDateChange is not a function求助

1. 确认组件是否强制要求onDateChange为必填函数 #

如果DatePick组件通过PropTypes或TypeScript将onDateChange标记为必填函数，而Storybook实例中未传递该props，就会触发错误。

• 错误示例（Story中未传props）：

  <DatePick />
  

• 修复方式：传递一个空函数或业务逻辑函数：

  <DatePick onDateChange={(selectedDate) => console.log(selectedDate)} />
  

2. 检查ApiGet组件的props传递逻辑 #

若DatePick嵌套在ApiGet组件内部，需确认ApiGet是否正确接收onDateChange并透传给DatePick：

• 错误示例（ApiGet未传递props给DatePick）：

  function ApiGet(props) {
    // 未将外部传入的onDateChange传递给DatePick
    return <DatePick />;
  }
  

• 修复方式：将props透传给内部的DatePick：

  function ApiGet(props) {
    return <DatePick onDateChange={props.onDateChange} />;
  }
  

3. 验证Storybook配置中args的类型 #

检查Story文件中是否为onDateChange传递了非函数类型的值：

• 错误示例（传入非函数值）：

  export const DefaultStory = {
    args: {
      onDateChange: "2024-01-01" // 错误类型：字符串而非函数
    }
  };
  

• 修复方式：改为函数类型：

  export const DefaultStory = {
    args: {
      onDateChange: (date) => console.log("选中日期：", date)
    }
  };
  

4. 排查DatePick组件内部的调用逻辑 #

如果DatePick组件内部未判断onDateChange的类型就直接调用，会导致未传props时报错：

• 错误示例（未做类型判断）：

  const handleChange = (date) => {
    this.props.onDateChange(date); // 未判断是否为函数
  };
  

• 修复方式：添加类型校验后再调用：

  const handleChange = (date) => {
    if (typeof this.props.onDateChange === "function") {
      this.props.onDateChange(date);
    }
  };
  

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