Множественный выбор дизайна Ant не принимает массив в качестве значения по умолчанию

Question

Заголовок говорит, в чем проблема, у меня есть ошибка компиляции, где 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

Что мне не хватает?

Answer 1

Я создал песочницу и не получил ошибку типа.

Попробуйте этот фрагмент.

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

Answer 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>