Reactjs+Flow：onChange触发报错问题求助

嘿，我帮你排查下这个Picker组件onChange报错的问题，主要是代码里有几个关键的小错误，咱们一步步来修复：

1. 组件参数结构写错了 #

React函数组件的第一个参数是完整的props对象，你把options和onChange拆成了两个独立参数（第二个参数是context，一般很少这么用），这直接导致onChange根本取不到父组件传递的正确函数引用，肯定会报错。

2. options的类型定义错误 #

你给options定义的类型是Object，但代码里却用了options.map——Object压根没有map方法啊！年份选项肯定是一个数组，所以options的类型应该改成数组，比如Array<string | number>。

3. onChange的类型定义不符合实际使用场景 #

你写的onChange: (e: SyntheticEvent<any>) => Function意味着这个函数需要返回另一个函数，但实际调用时你直接执行了onChange(e)，如果onChange真的返回函数，那相当于没触发真正的回调逻辑；而且通常事件处理函数不需要返回值，应该定义为返回void。

修复后的完整代码 #

//@flow
import React from "react";

// 先统一定义props的类型，更清晰
type PickerProps = {
  options: Array<string | number>,
  onChange: (e: React.SyntheticEvent<HTMLSelectElement>) => void
};

export const Picker = ({ options, onChange }: PickerProps) => {
  return (
    <span>
      {/* 把defaultValue放在select上才是正确的默认值写法 */}
      <select defaultValue=" " onChange={e => onChange(e)}>
        <option value=" ">Pick Year</option>
        {options.map(year => (
          <option value={year} key={year}>
            {year}
          </option>
        ))}
      </select>
    </span>
  );
};

额外小提示 #

如果需要在onChange里直接拿到选中的年份值，可以这么写：

onChange={(e) => {
  const selectedYear = e.target.value;
  // 这里可以直接处理选中值，比如传给父组件
  onChange(e);
}}

记得确保父组件传给Picker的onChange函数符合咱们定义的类型，是接收事件对象且无返回值的函数哦。

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