蚂蚁设计多选不接受数组作为默认值答案

【问题标题】：Ant design multiple select does not accept array as default value蚂蚁设计多选不接受数组作为默认值
【发布时间】：2020-02-12 11:05:50
【问题描述】：

标题说明了问题所在，我有一个编译错误，TS 说：类型 string[] 不可分配给类型 'string |数字' 但是文档说我可以这样做：

                <Select
                    mode="multiple"
                    defaultValue={['ALL']}
                    onChange={this.handleChange}
                >
                    <Option value="ALL">Tout</Option>
                    {mediaGenres.map((mg: MediaGenre) => <Option key={mg.id} value={mg.id}>{mg.label}</Option>)}
                </Select>

当我检查选择的类型文件时，它是这样的：

export declare type SelectValue = string | string[] | number | number[] | LabeledValue | LabeledValue[];
export interface SelectProps<T = SelectValue> extends AbstractSelectProps {
    value?: T;
    defaultValue?: T;

所以它必须被接受为字符串[]

我查了两个版本的antd

我错过了什么？

【问题讨论】：

标签： reactjs typescript antd

【解决方案1】：

我创建了一个沙盒，但没有出现类型错误。

试试这个sn-p。

export default function App() {
  const { Option } = Select;
  return (
    <div className="App">
      <Select
        mode="multiple"
        defaultValue={["1", "2"]}
        onChange={(e: string[] | number[] | undefined) => {
          console.log(e);
        }}
      >
        <Option value="1">1</Option>
        <Option value="2">2</Option>
        <Option value="3">3</Option>
        <Option value="4">4</Option>
      </Select>
    </div>
  );
}

如果它不起作用，您可以将您的 tsconfig.json 与此示例的配置进行比较： https://codesandbox.io/s/awesome-solomon-kinkc

【讨论】：

扑通一声！我发现发生了什么事。我的 onChange 处理程序函数输入错误。谢谢帮助
在这种情况下，请像这样键入您的 onChange 处理程序：(e: string[] | number[] | undefined)

【解决方案2】：

如果您将默认值分配为变量而不是动态创建它会发生什么？

let defaultSelections = ["ALL"];
...
...
<Select
  mode="multiple"
  defaultValue={defaultSelections}
  onChange={this.handleChange}
>
  <Option value="ALL">Tout</Option>
  {mediaGenres.map((mg: MediaGenre) => <Option key={mg.id} value={mg.id}>{mg.label}</Option>)}
</Select>

【讨论】：