记录一个React中使用antd的多选Select在编辑时数据展示的问题

$问题$

当我新增后，点击编辑按钮，多选框显示的是我数据的id，而不是我想要的内容text

$代码$

后台接口返回int数组，前台把数组的数据传递给FormItem，Select组件对FormItem的数据进行展示

 const roles =roleIds;//后台获取到的id列表
 //设置表单字段的值
 componentform.setFieldsValue({
     id: workbenchObject.blockInfo.id,
     componentName: workbenchObject.blockInfo.name,
     blockSettingJson: workbenchObject.blockInfo.setting,
     image: workbenchObject.blockInfo.imageName,
     systemUserRole: roles
 });
...
// 多选框
	  <Row gutter={24}>
        <Col span={24}>
          <Form.Item
            labelCol={{ span: 3 }}
            wrapperCol={{ span: 20 }}
            name="systemUserRole"
            label="允许查看的角色"
            rules={[{
               required: true,
               message: '请选择允许查看模块的角色!',
             }]}>
            <Select
              mode="multiple"
              allowClear
              style={{ width: '100%' }}
              placeholder="请选择允许查看模块的角色!"
            >
              {UserRole?.map(item => (
                <Option key={item.id}>{item.text}</Option>
              ))}
            </Select>
          </Form.Item>
        </Col>
      </Row>     

$原因$

$select选择器对数据的显示，是匹配到select下拉框数据源中对应的value值时则会显示相应的label；若是没有匹配到，则显示的是该value。$

$而我的下拉框的选项的数据UserRole是一个id，text的对象，id的类型是一个字符串，int数组里面的数据匹配不到选项数据，所以直接显示了数组的数据$

$解决$

$将int数组转为字符串数组，使其能够匹配到选项数据$

$代码$

	  const roles =roleIds.map(id => {return id.toString()});//将int数组转为string数组
          console.log(roles);
          componentform.setFieldsValue({
              id: workbenchObject.blockInfo.id,
              componentName: workbenchObject.blockInfo.name,
              blockSettingJson: workbenchObject.blockInfo.setting,
              image: workbenchObject.blockInfo.imageName,
              systemUserRole: roles
       });

$成功$