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

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


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


实例中,接口返回数据格式如下:
image.png
其中,typenode_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.typeitem.node_id时,渲染结果中无Option,其它不包含大写字母的字段则可以正常显示。
image.png


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


该问题如何解决?

阅读 2.9k
1 个回答
发现问题:

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

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

2、执行@操作,控制台报错
image.png

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

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>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题