javascript - 流类型检查 : undefined is not a function even if there is a conditional

Question

我正在使用 Flow作为我的 JavaScript 代码的静态类型检查器，我收到以下错误:

Cannot call this.props.onChange because undefined [1] is not a function.
 [1]  25│     onChange?: Time => any,
        :
     192│         if (isValid && this.props.onChange) {
     193│             const match = this.matchValue(value);
     194│             if (match) {
     195│                 this.props.onChange(this.parsedToTime(this.parseValue(match)));
     196│             }
     197│         }
     198│     }

我对 Props 的定义如下所示(定义了更多的 props，用 ... 标记):

type Props = {
    ...
    onChange?: Time => any,
    ...
};

然后我在我的 React 类定义中使用 props 作为类型参数:

export default class TimeInput extends React.Component<Props, State> {
    ...

    // ...and in this class I have a method that calls onChange
    //    if onChange is not evaluated as false

    handleChange = ({ target }: { target: { value: string } }) => {
        const { value } = target;
        const isValid = this.validateInput(value);

        this.setState({
            value,
            isValid
        });

        if (isValid && this.props.onChange) {
            const match = this.matchValue(value);
            if (match) {
                this.props.onChange(this.parsedToTime(this.parseValue(match)));
            }
        }
    };
}

如果我理解Flow Docs正确地，if (this.props.onChange) {...} 测试应该足以让 Flow 理解，onChange 不能是 undefined 因此它必须是一个函数(如类型定义中所定义)。

我在这里做错了什么？

Answer 1

尤其是流文档"refinement invalidation" section你应该在调用之前检查 if (this.props.onChange)。

我还假设指定 defaultProps 像 onChange: () => {} can be a better workaround因为您在调用回调之前得到的检查较少。