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

我遇到的问题：
在学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
                })
            })
          }