Установка initialValue для Form.Item, обертывающего Cascader, вызывает ошибку «Uncaught TypeError: label.join не является функцией»

Question

Итак, как только я устанавливаю initialValue в Form.Item, который является оболочкой для компонента Cascader, я начинаю получать ошибки в консоли, говоря, что label.join не является функцией.

const optionsGender = [{value: 'Male', label: 'Male'},
            {value: 'Female', label: 'Female'},
            {value: 'Trans-Gender', label: 'Trans-Gender'}];


<Form.Item
    label="Gender"
    name="gender"
    initialValue="Female">
    <Cascader options={optionsGender} />
</Form.Item>

initialValues ​​на Form.Item (s) wrapping Input (s) работают нормально.

<FormItem
    label="First Name" name="first_name"
    initialValue={profile.first_name}>
    <Input/>
</FormItem>

Что я делаю не так?

Answer 1

Проблема возникает из-за свойства displayRender компонента Cascader.

displayRender prop - это функция, которая отображает выбранный параметр в компоненте Cascader. Эта функция принимает два параметра: метку и выбранную опцию. Ниже приведена реализация этой функции по умолчанию

label => label.join(' / ')

Итак, когда вы устанавливаете начальное значение в виде строки, label является строкой, и вы не можете вызвать функцию .join() для строки.

Решение:

Есть 2 способа решить эту проблему:

1. Передать массив в качестве начального значения

    <Form.Item label="Gender" name="gender" initialValue={["Female"]}>
      <Cascader options={optionsGender} />
    </Form.Item>
   

2. предоставьте вашу собственную реализацию displayRender prop function

    <Form.Item label="Gender" name="gender" initialValue={"Female"}>
      <Cascader options={optionsGender} displayRender={label => label}/>
    </Form.Item>
   

Демо:

Править голодный калам-qgolm