Welcome to ZaiNaLe Developer Community-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k views
in Technique[技术] by (71.8m points)

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为本地数据,非接口返回数据时都能正常渲染。


该问题如何解决?


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
发现问题:

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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to ZaiNaLe Developer Community-Open, Learning and Share

0 questions

2.1m answers

0 comments

40.9k users

...