onChange?: (ValueType, ActionMeta) => 无效，与 OptionType 不兼容

Question

我经常从 react-select 的流程中收到错误。这是在更新到 v2.4.2 之后发生的。很明显，我正在将正确的类型传递给句柄更改，它期望一个包含对象的数组 + OptionType 正在接受任何字符串 [string]: any。谁能解释为什么会这样，或者这是 react-select 流类型中的潜在错误？

流程错误

Error:Error:line (104)Cannot create `Select` element because array type [1] is incompatible with `OptionType` [2] in the first argument of property `onChange`.
    Error:Error:line (104)Cannot create `Select` element because array type [1] is incompatible with null [2] in the first argument of property `onChange`.
    Error:Error:line (104)Cannot create `Select` element because array type [1] is incompatible with undefined [2] in the first argument of property `onChange`.

组件示例

// @flow
import * as React from 'react';
import Select from 'react-select';

type LabelValueObject = Object & {
    value: string,
    label: string
}

type State = {
    options: LabelValueObject[],
    selectedOptions: LabelValueObject[],
}

export class ServiceDropdown extends React.Component<Props, State> {
    constructor(props: Props) {
        super(props);

        this.state = {
            options: [],
            selectedOptions: null,
        };
    }

    handleChange = (selectedOptions: LabelValueObject[]): void => {
        this.setState({ selectedOptions });
    };

    render() {
        const { selectedOptions } = this.state;
        return (
            <>
                <Select
                    isMulti
                    isSearchable
                    onChange={this.handleChange}    <=== flow error
                    value={selectedOptions}
                    options={this.state.options}
                />
            </>
        );
    }
}

export default ServiceDropdown;

Answer 1

onChange收到的函数类型如下：

onChange: (ValueType, ActionMeta) => void,

ValueType定义如下：

type ValueType = OptionType | OptionsType | null | void

其中 OptionsType = Array<OptionType>.

(Reference)

因此，基于此，您还应该将值类型 null 和 undefined/void 添加到 handleChange 的类型。

 handleChange = (selectedOptions: LabelValueObject | LabelValueObject[] | null | void) => { ... }

onChange?: (ValueType, ActionMeta) => 无效，与 OptionType 不兼容

onChange?: (ValueType, ActionMeta) => void, is incompatible with OptionType

javascript

reactjs

flowtype

react-select