antd中使用Mentions异步加载遇到的中文和大写英文无法渲染问题？

Question

项目中使用到antd中的Mentions组件，渲染Option的value属性时遇到一个问题，value属性只有为英文小写字符串时才能渲染成功，否则显示nodata，此问题如何解决？
以下例子为Antd官网的Mentions示例，异步加载数据来源于github

---

stackblitz地址：antd官网中的Mentions组件异步返回数据实例

---

实例中，接口返回数据格式如下：

其中，type与node_id字段值字符串中包含大写字母。

---

关键部分代码块：

<Mentions 
    style={{ width: '100%' }} 
    loading={loading} 
    onSearch={this.onSearch}
>
    {users.map((item,index) => (
        <Option 
            key={item.login} 
            value={item.login}>
            <span>{item.login}</span>
        </Option>
    ))}
</Mentions>

以上代码块中，当value属性值设置为item.type与item.node_id时，渲染结果中无Option，其它不包含大写字母的字段则可以正常显示。

---

另外，在本地测试中，当value值所设字段为中文时，也无法渲染Option列表；但是当数据来源users为本地数据，非接口返回数据时都能正常渲染。

---

该问题如何解决？

Answer 1

发现问题：

---

1、给value绑定一个错误的数据：

<Option 
    key={item.login} 
    value={<p>错误数据<p>}>
    <span>{item.login}</span>
</Option>

2、执行@操作，控制台报错

3、根据报错定位到所在行

4、打上断点，发现是验证规则将输入值与Option绑定的value值进行了indexOf操作

---

解决问题：

根据antd文档，给Mentions绑定自定义过滤规则，跳过过滤

<Mentions 
    style={{ width: '100%' }} 
    loading={loading} 
    filterOption={() => {true}}
    onSearch={this.onSearch}
>
    {users.map((item,index) => (
        <Option 
            key={item.login} 
            value={item.login}>
            <span>{item.login}</span>
        </Option>
    ))}
</Mentions>