antdesign使用中遇到的bug踩坑记录 --- card

antdesign的card组件踩坑记录

场景

想要达成的需求如下，在接口未完成期间我这里通过循环生成4张card拟对不同类型的公式进行展示。

出现问题

第一张card的标题塌陷了！

代码数据流大致如下

   //model 返回新的list数组
   list:ary = []
	for(let i = 0; i < 4; i++){
        list.push({
        name: i,
        formula: '4212',
        calcRule: '432123',
    })
   //index.tsx 从store中获取list数组再遍历生成card
   {list.map((value:ListItem, index:number) => {
        return (
          <Col key={index} span="8" style={{marginRight:'0px'}}>
            <Card className="FormulaManagement-normal" title={value.name} bordered={true}>
              <div className="y-icon">
                <DeleteOutlined type="delete" onClick={() => formulaDeleteConfirm(value)} />
              </div>
              <p className="y-text">公式：{value.formula}</p>
              <p className="y-text">计算规则：{value.calcRule}</p>
            </Card>
          </Col>
        )
      })}

原因

for循环遍历过程中i是一个数字，card的title属性不会把数组转为字符串，所以card的title就发生了自动类型转换：即 0 —— false，于是title不进行展示，title部分丢失，然后发生类似塌陷的现象。

解决

手动转义

for(let i = 0; i < 4; i++){
        list.push({
        //这里对i进行转义
        name: i.tostring(),
        formula: '4212',
        calcRule: '432123',
    })
    

最后达到正常效果