react-select-currency组件报错：_this.props.onChange不是函数求助

问题原因 #

这个错误说明react-select-currency组件内部需要调用onChange方法，但你当前没有传递该prop，反而使用了onCurrencySelected——这大概率不是组件预期的回调属性名。

解决方案 #

1. 替换回调属性为onChange #

修改组件的回调属性，将onCurrencySelected替换为onChange，同时根据组件返回的参数格式调整逻辑：

<FormField
  control={form.control}
  name="currency_type"
  render={({ field }) => (
    <FormItem className="md:col-span-1">
      <FormLabel>Currency</FormLabel>
      <SelectCurrency
        onChange={(selectedCurrency) => {
          // 多数货币选择组件会返回包含code/name/symbol的对象，按需提取值
          const selectedValue = typeof selectedCurrency === 'string' 
            ? selectedCurrency 
            : selectedCurrency.code;
          console.log("Selected Value:", selectedValue);
          field.onChange(selectedValue);
        }}
        value={field.value}
        className="w-full"
        key={field.value}
      />
      <FormMessage />
    </FormItem>
  )}
/>

2. 修正类型声明文件 #

确保react-select-currency.d.ts中的props定义正确包含onChange：

declare module 'react-select-currency' {
  import React from 'react';

  export interface Currency {
    code: string;
    name: string;
    symbol: string;
  }

  export interface SelectCurrencyProps {
    onChange: (currency: Currency | string) => void;
    value?: string;
    className?: string;
    // 其他组件支持的props
  }

  const SelectCurrency: React.ComponentType<SelectCurrencyProps>;
  export default SelectCurrency;
}

3. 版本排查 #

如果上述方法无效，检查组件版本是否存在文档与实际API不符的情况。尝试升级到最新版本，或回退到稳定版本后再测试。

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