Antd Select 组件设定初始值 Option 选项匹配问题

一、问题描述

最近在实现编辑表单的功能时，其中有一个下拉选择框，需要设定初始值，数据源为对象数组，其中包含id和name属性，将id设为Select.Option的key，将name设为下拉选择器展示的内容，结果发现选项匹配出现问题，即选择框中展示了设定的初始值，展开下拉列表，却未勾选。
以下为关键部分源代码：

<Card title="前端展示">
  <FormItem {...formItemLayout} label="前端展示：">
    {getFieldDecorator('frontCategoryList', {
      rules: [{
        required: true, message: '必填'
      }],
    })(
      <Select
        mode="multiple"
        allowClear
        style={{ width: '70%' }}
        placeholder="请选择类目"
        showArrow={true}
      >
        {this.state.categoryList.map(item => <Select.Option key={item.id}>{item.name}</Select.Option>)}
      </Select>
    )}
    <a
      style={{ marginLeft: "15px" }}
      href={`#/${menuPrefix}/item/frontCategory`}
    >
      前端类目管理
    </a>
  </FormItem>
</Card>

// 设定表单的初始值
this.setState(stateData, () => {
	const setFieldsValue = this.props.form.setFieldsValue;
	const setData = {}; // 存储表单初始值的对象
	// 其他部分隐去，只说明frontCategoryList部分原来使用 name 来匹配
	setData.frontCategoryList = ['机油', '轮胎'];
	setFieldsValue(setData);
})

二、解决方案

设定初始值时设定的是字符串数组，实际上应该用id来匹配，并且Select.Option 组件应设定 value 属性为 id 的值
以下为实现的关键部分源代码：

<Card title="前端展示">
  <FormItem {...formItemLayout} label="前端展示：">
    {getFieldDecorator('frontCategoryList', {
      rules: [{
        required: true, message: '必填'
      }],
    })(
      <Select
        mode="multiple"
        allowClear
        style={{ width: '70%' }}
        placeholder="请选择类目"
        showArrow={true}
      >
        {this.state.categoryList.map(item => <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>)}
      </Select>
    )}
    <a
      style={{ marginLeft: "15px" }}
      href={`#/${menuPrefix}/item/frontCategory`}
    >
      前端类目管理
    </a>
  </FormItem>
</Card>

// 设定表单的初始值
this.setState(stateData, () => {
	const setFieldsValue = this.props.form.setFieldsValue;
	const setData = {};	// 存储表单初始值的对象
	// frontCategoryList部分应赋值为与原数据源匹配的 id 的集合
	setData.frontCategoryList = [19701, 19702];
	setFieldsValue(setData);
})

三、总结

对于数据源是字符串数组，直接使用字符串数组来匹配即可，antd官网的例子即是这种情况Ant Design Select；对于数据源是对象数组，应该采用id来匹配，而不是name，并且Option不应该只设定key，也要设定value为id。