关于Antd Form和Select的多选器initialValue的问题

Question

问题描述

看官方文档, 直接给Select设置defaultValue={['a10', 'c12']}即可
但是我在结合form的initialValue之后得不到正确的效果。会显示initialValue的内容但是不会显示对应Option的内容。原因是因为Option选项的数据来自于另一个接口，还没渲染的时候initialValue已经生效了。 请问有什么办法可以解决吗？仅仅设置this.props.form.setFiledValue感觉也做不到。
请问大家有什么思路解决吗？谢谢

问题出现的环境背景及自己尝试过哪些方法

initialValue先渲染了, Options的数据还没拿到，导致直接显示username,但是希望能等Option渲染之后再去判断值, 从而渲染Option的“${item.realname}${item.nickname}”

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

<FormItem {...formItemLayout} label="负责人">
    {getFieldDecorator('ownersAsList', {
        rules: [{
            required: true,
            message: '负责人不能为空'
        }],
        initialValue: ownersAsList || []
    })(
        <Select
            mode="multiple"
            placeholder="请选择负责人"  
            onSearch={this.handleSearch}                              
        >
            {
                ownersList.map((item, index) => (
                    <Option key={index} value={item.username}>{`${item.realname}(${item.nickname})`}</Option>
                ))
            }
        </Select>
    )}
</FormItem>

注意:ownersAsList和ownersList数据来自于不同的接口

你期待的结果是什么？实际看到的错误信息又是什么？

谢谢！

Answer 1

你更换一种变量赋值渲染方式试试，我一直是用这样的方式走的

 
        const selectList= ownersList.map((item, index) => {
                    <Option key={index} value={item.username}>{`${item.realname}(${item.nickname})`}</Option>
                )}
            
<FormItem {...formItemLayout} label="负责人">
    {getFieldDecorator('ownersAsList', {
        rules: [{
            required: true,
            message: '负责人不能为空'
        }],
        initialValue: ownersAsList || []
    })(
        <Select
            mode="multiple"
            placeholder="请选择负责人"  
            onSearch={this.handleSearch}                              
        >
           {selectList}
        </Select>
    )}
</FormItem>

Answer 2

既然用了form，Option的value就没必要用了