《关于学react的时候发现数据过老图标显示不出来并尝试解决这件事》

最新推荐文章于 2024-05-15 15:49:37 发布

stdue

最新推荐文章于 2024-05-15 15:49:37 发布

阅读量358

点赞数 1

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： react

本文链接：https://blog.youkuaiyun.com/fationopen/article/details/114940232

笔记专栏收录该内容

1 篇文章

订阅专栏

本文介绍了在React项目中遇到Ant Design图标库更新问题时的解决方案。通过在state中创建新数组来存放新版本图标，并利用axios获取数据，再通过数据循环替换原有图标，实现了兼容新旧版本的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我遇到的问题：
在学react的时候（看视频），因为antd的图标写法更新了，导致视频上的icon不能使用
在这里插入图片描述

如图所示，新版的icon使用了驼峰命名法，并且作为一个组件的形式进行输入

我所使用的解决办法：

在state中新成立一个数组，用来放置即将要用的图标

import { UsergroupDeleteOutlined, IdcardOutlined, DingdingOutlined, GoogleOutlined, WechatOutlined, DribbbleOutlined } from '@ant-design/icons';
constructor(props) {
        super(props);
        this.state = {
            list:[],
            newlist: [
                <UsergroupDeleteOutlined />,
                <IdcardOutlined />,
                <DingdingOutlined />,
                <GoogleOutlined />,
                <WechatOutlined />,
                <DribbbleOutlined />,
            ]
        }
    }

拿到数据后将数据保存到一个常量中（Data），通过数据循环将数组中的新值循环到list中，替换掉旧值
item可以获取数据的内容，index可以获取数据的索引，通过索引即可实现图标的改变

componentDidMount(){
axios.get('...')
            .then((res) => {
                const Data = res.data.data
                Data.map((item, index) => {
                    item.icon = this.state.newlist[index]
                    console.log(item.icon, index);
                })
                this.setState({
                    list: res.data.data
                })
            })
          }

在这里插入图片描述