javascript - 改变? : (ValueType, ActionMeta) => void,与 OptionType 不兼容

标签 javascript reactjs flowtype react-select

我不断地从 react-select 流程中收到错误。这是更新到 v2.4.2 后发生的。很明显,我将正确的类型传递给句柄更改,该更改期望包含对象的数组 + OptionType 接受任何字符串 [string]: any。任何人都可以解释为什么会发生这种情况,或者这是 react 选择流类型中的潜在错误?

流程错误

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;

最佳答案

onChange收到的函数输入如下:

onChange: (ValueType, ActionMeta) => void,

ValueType定义如下:

type ValueType = OptionType | OptionsType | null | void

哪里OptionsType = Array<OptionType> .

( Reference )

因此,在此基础上,您还应该添加值类型 nullundefined/void类型为handleChange .

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

关于javascript - 改变? : (ValueType, ActionMeta) => void,与 OptionType 不兼容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55813325/

相关文章:

javascript - 将 Bootstrap 4 Carousel 与动画文本同步(morphext)

css - React App On Heroku - CSS 样式在移动设备上不生效

javascript - "one of object properties"的流类型

javascript - 如何在数组中的数组中的 Postman 中设置环境变量?

javascript - Datatables JS - 基于数据值排名的条件格式

reactjs - 使对象传播以使用 webpack.config 和 babelrc 文件

javascript - 是的,选择字段(下拉菜单)react-hook-form 上的验证不起作用

reactjs - 如果在node_modules中有react和react-native,flow会提示

javascript - '解构(缺少注释 )' source: ' 流'

javascript - 如果找不到动态音频src或为空,则使用javascript隐藏HTML5音频播放器