解决antd Select选择器值为null时有个空标签占位输入

自己实测下来，发现只有值是undefined，就不会有空标签占位输入，但是如果值是ull，就会有。

看了下遇到这个问题的人数还是蛮多的，官方的回复就是认为ull就是有值的，只不过是空值，反正我是觉得挺有道理的。

我先说下我为什么能遇到这个问题，因为在PHP中没有undefined这个类型，只有ull，所以我在返回的空数据的时候就是ull，然后问题就复现了。

那既然出现这个问题了，野人也是解决了，才会去写这篇文章，大家看个示例吧。

<Form.Item
  name="referrer"
  normalize={(value) => {
    return [
      ...new Set(
        (value || [])
          .filter((v: string) => v.trim() != "")
          .map((v: string) => v.trim())
      ),
    ];
  }}
>
  <Select
    mode="tags"
    style={{ width: "100%" }}
    placeholder="请输入，按回车后添加"
  ></Select>
</Form.Item>;

主要是利用了Form.Item中的normalize参数（组件获取值后进行转换，再放入 Form 中。不支持异步），更多用法大家看官方就可以了，这里主要讲个思路哈。

参考资料

解决antd Select选择器空标签输入_梅花三的博客-CSDN博客

Select 控件为什么会把 null 当做有 value 而不显示 placeholder ，必须要为 undefined 才可以？ · Issue #2367 · ant-design/ant-design (github.com)