一个空格引发的bug!

1 前言

框架是react,ui用的是antd 3,小菜鸡一枚

最近在做一个导入文件的需求,如果校验全部通过,就会把数据填充到筛选项中,

品类用的是Cascader级联选择,品类链接用的是input输入框

2 Bug描述

因为之前没有接口的时候,我mock数据导入是没有问题的,正常是这样的

下午在和后端联调的时候,后端的兄弟发给了我一个测试文件

看起来没什么问题,当我导入的时候我就傻掉了

Cascader的值是没有显示,如果值是空的那么为什么没有显示placeholder请输入的占位符呢?我们来检测一下这个Cascader里面有没有值

经过调试发现Cascader是有值的,为什么不显示呢?

3 解决

通过我自己两个小时的调试都没有解决掉

我就去问组长有没有碰到过这种情况,组长也觉得这个是很神奇的bug

然后我又跑去问测试,测试大佬给了我一个很重要的提示会不会是全角和半角空格的原因,突然恍然大悟

我就去mock数据的apifox复制了一下品类,粘贴到导入文件里面

再次导入文件,Cascader神奇的显示了

然后我对比了一下导入文件的两个品类

这两个是一模一样的,肉眼看不出来什么区别,然后我双手抱头往后,背靠椅子陷入了沉思,

因为全角和半角的空格明显是可以感觉有区别的,然后我对品类进行了unicode解码

例子如下:

const changeBlank = (str: string) => {
    let result = ''
    for (let i = 0; i < str.length; i++) {
      const code = str.charCodeAt(i) //获取当前字符的unicode编码
      console.log(code)
    }
    return result
  }

红框框着的通过解码索引的空格Unicode码数,正常的空格是32,下面的空格对应的是160

然后去百度了一下这个空格是一个叫无间断空格的东西,

NBSP：“Non-Breaking Space” ，不间断空格 也称为： no-break space，non-breakable space (NBSP)， hard space（硬空格）

在HTML中，

被编码为   或 &#160，宽度和普通空格一致。

在 Unicode 码点为 U+00A0 ， 命名为Narrow No-Break Space 在 js 中是 \xA0

NBSP 是常用的编程和网页创建的行，不打破空间上的程序或文档的空间。

然后我们完善一下例子:

const changeBlank = (str: string) => {
    let result = ''
    for (let i = 0; i < str.length; i++) {
      const code = str.charCodeAt(i) //获取当前字符的unicode编码
       if (code === 160) {
        //  160=&nbsp的空格
        let d = str.charCodeAt(i) - 160 + 32
        result += String.fromCharCode(d) // 方法返回由指定的 UTF-16 代码单元序列创建的字符串。
      } else {
        result += str.charAt(i)
      }
    }
    return result
  }

这样就OK了,我们再导入一次文件试试看

成功解决!

4 最后

菜鸡第一次写文章,文笔略差,见谅

请大家多多指教