reactjs - 在包装 Cascader 的 Form.Item 上设置 initialValue 会抛出 "Uncaught TypeError: label.join is not a function"

Question

因此，一旦我在包装了 Cascader 组件的 Form.Item 上设置了 initialValue，我就开始在控制台上收到错误消息，指出 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>

包装 Input(s) 的 Form.Item(s) 上的 initialValues 工作得很好。

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

我究竟做错了什么？

Answer 1

问题是因为 displayRender Cascader 的 Prop 成分。displayRender prop 是在 Cascader 中显示所选选项的函数成分。这个函数有两个参数，标签和选择的选项。下面是这个函数的默认实现

label => label.join(' / ')

因此，当您将初始值设置为字符串时， label是一个字符串，你不能调用 .join()字符串上的函数。
解决方案
有两种方法可以解决这个问题:

传递一个数组作为初始值

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

提供您自己的 displayRender 实现 Prop 功能

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

演示: