React传函数作为Prop报错handleFunction is not a function如何解决？

你传递函数的逻辑本身没有问题，错误出在TestComponent的参数定义不符合React组件规范：

• React函数组件的第一个入参永远是所有传入prop组成的对象，你直接把handleFunction、input拆成了第一、第二个位置参数，导致实际拿到的handleFunction是整个props对象，自然不是函数，触发运行时报错。
• 你写的第二个参数input实际上是React函数组件的第二个可选参数ref，并不是你传入的input prop，取值自然不对。

修改TestComponent的参数写法，从props对象中解构出你需要的属性即可：

// 写法1：直接解构props，同时补充明确的类型声明（推荐）
interface TestComponentProps {
  handleFunction: (onChange: (event: any) => void, selected: string) => void;
  input: any; // 建议你补充input的实际类型，替换掉any
}

function TestComponent({ handleFunction, input }: TestComponentProps) {
  return (
    <FormSpy subscription={{ dirty: true, values: true }}>
      {() => (
        <OnChange name="item-name">
          {async (value) => {
            handleFunction(input.onChange, value);
          }}
        </OnChange>
      )}
    </FormSpy>
  );
}

export default TestComponent;

如果你暂时不想调整类型定义，也可以用最简写法修复：

// 写法2：最简修复（不推荐，丢失类型校验能力）
function TestComponent(props: any) {
  const { handleFunction, input } = props;
  // 剩下的原有逻辑保持不变即可
}

修改后List组件的原有调用逻辑不需要改动，运行即可正常拿到传入的函数。

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