前端开发过程遇到的问题总结_解决前端显示null字符串-优快云博客

本文链接：https://blog.youkuaiyun.com/yqdid/article/details/129187033

Q1开发过程遇到的问题

记录开发过程中遇到的问题及处理办法

antD组件 select 组件 placeholder 设置了不显示

原因：默认值为 '' 会 null 都不会显示，要设置为undefined

将树形结构数据转一维数组

// 地区树状数据处理
export function areaDataHandle(treeData: areaData[]) {
  let areaList: any[] = [];
  pushItem(treeData);
  function pushItem(data: areaData[]) {
    data.map((item) => {
      let { id, pid, name, nameEn } = item;
      areaList.push({ id, pid, name, nameEn });
      if (item.children && item.children?.length > 0) {
        pushItem(item.children);
      }
    });
  }
  return areaList;
}

表单项内有多个内容，使用<Form.Item noStyle>进行展示
select 默认值defaultValue 不生效<From.item initValue> 设置initvlaue
省市联动数据： select框显示值渲染不联动：直接设置 form.setFieldValue('cityId', undefined);

formData 的请求格式

用来提交表单数据（尤其是有文件附件时）：参数用append 添加
详细使用： https://blog.youkuaiyun.com/weixin_45277161/article/details/115550264

// values 是表单对象
const formData = new FormData();
for(const key in values){
  console.log(key);
  formData.append(key, values[key]);
}

解决前后端分离的项目传null值变为“null“字符串的问题

这其实根本不是一个问题，而是事实。JSON传值的时候，null就会变成"null"字符串。
解决：
https://blog.youkuaiyun.com/qq_39900031/article/details/127503848
https://blog.youkuaiyun.com/qq_39900031/article/details/127503848

提交表单的时候如果传null或undefined，都会被后端处理成字符串。
所以，传空字符串'' ，传到后端才会处理成null。
为了解决歧义，处理方式：
在这里插入图片描述

开发的组件使用时遇到 ts 报错： “JSX.IntrinsicElements”上不存在属性
原因：组件命名必须是大驼峰命名法，否则不能识别
在这里插入图片描述

下载 /导出文件方法：

如果是 get请求获取的下载文件可以使用页面直接跳转方法window.location.href访问就能下载， post 返回就用blob封装动态a标签
参考：
https://blog.youkuaiyun.com/u010059669/article/details/122623034
动态a标签 + post请求
 https://blog.youkuaiyun.com/qq_41131745/article/details/128861548
附件文件下载方式
上面的下载方式可能存在问题(比如后端的接口需要token访问，直接用地址跳转的方法可能会存在token问题)
参考：https://www.jianshu.com/p/f7e3477d7182

完整方法存档
设置请求的responseType: 'blob'，统一转为Blob 数据，然后再生成文件下载：

export const downLoadFile = (res) => {
  // console.log(res);
  const { data, headers } = res;
  let contentType = headers.get('content-type') || undefined;
  let contentDisposition = headers.get('content-disposition') || undefined;

  contentType = isExistValue(contentType) ? contentType : undefined;
  contentDisposition = isExistValue(contentDisposition) ? contentDisposition : undefined;

  let filename = 'filename';
  if (typeof contentDisposition === 'string') {
    contentDisposition = valueToLowerCase(contentDisposition);
    try {
      // filename = /filename="([^"]+)"/.exec(decodeURIComponent(contentDisposition))[1];
      filename = contentDisposition.match(/filename=(.*)/)[1];
    } catch (err) {
      console.log(err);
      filename = contentDisposition;
    }
  }
  // console.log(decodeURI(filename));
  // 首先要创建一个 Blob 对象（表示不可变、原始数据的类文件对象）
  const blob = new Blob([ data ], { type: contentType });
  if (typeof window.navigator.msSaveBlob !== 'undefined') {
    // 兼容IE，window.navigator.msSaveBlob：以本地方式保存文件
    // @ts-ignore
    window.navigator.msSaveBlob(blob, decodeURI(filename));
  } else {
    let href = window.URL.createObjectURL(blob);
    let eLink = document.createElement('a'); // 创建一个<a>标签
    eLink.style.display = 'none'; // 隐藏标签
    eLink.href = href; // 配置href，指向本地文件的内存地址
    eLink.download = decodeURI(filename);
    document.body.appendChild(eLink);
    eLink.click();
    // 释放URL 对象
    document.body.removeChild(eLink);
    // 释放掉blob对象
    URL.revokeObjectURL(href);
  }
};

改bug 时除了测试改好的bug 要记得测试改动的地方牵扯影响的代码

form表单的自动填充关闭

设置 autocomplete=“off” 会有两种效果：

这会告诉浏览器，不要为了以后在类似表单上自动填充而保存用户输入的数据。但浏览器不一定遵守。
这会阻止浏览器缓存会话历史记录中的数据。若表单数据缓存于会话历史记录，用户提交表单后，再点击返回按钮返回之前的表单页面，则会显示用户之前输入的数据。

如果即使在 autocomplete 已经设置为 off 时，浏览器仍继续提供输入建议，那么你需要更改输入元素的 name 属性。

a 标签置灰禁用

<a href="#" style="pointer-events: none;cursor: default;color:gray;">点击</a>
<a href="#">点击</a>

建议用button 代替a标签设置禁用功能。antd 的button 可以设置type=link 样式效果和a标签一样，但是可以灵活控制禁用。

英文不会自动换行展示

问题场景：英文文本超出了范围显示，但中文却会自动换行

在这里插入图片描述

正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当一行内容达到定义的宽度之后会自动换行。但英文和数字不会换行，会超出宽度显示

解决办法：
设置这两个属性中的其中一个都可以实现强制换行（）

word-wrap: 'break-word'; 或
word-break: 'break-all' ;

效果：
在这里插入图片描述

antd 表单验证，一行有多个控件的验证

问题场景：有两个内联控件，需要将错误信息展示各自控件下。

在这里插入图片描述
实现方式：使用style修改布局。参考antd的示例：
style={{ display: 'inline-block', width: 'calc(50% - 8px)' }}

 <Form.Item label="BirthDate" style={{ marginBottom: 0 }}>
	 <Form.Item
	    name="year"
	    rules={[{ required: true }]}
	    style={{ display: 'inline-block', width: 'calc(50% - 8px)' }}
	  >
	    <Input placeholder="Input birth year" />
	  </Form.Item>
	  <Form.Item
	    name="month"
	    rules={[{ required: true }]}
	    style={{ display: 'inline-block', width: 'calc(50% - 8px)', margin: '0 8px' }}
	  >
	    <Input placeholder="Input birth month" />
	  </Form.Item>
</Form.Item>

antd 中 Upload 文件上传组件，放在表单中提交，移除文件上传列表后，表单该字段还有值

问题背景：在表单中有一个上传文件的填写项，不过文件上传是同表单一起提交到后端的。有一个问题，移除上传的文件列表的时候，再次提交表单，并没有校验提示文件是未上传的。原因是删除之后Upload还是会给form提供值，file中还有值。

在这里插入图片描述
移除文件后提交表单：

我们希望是移除后，能够触发校验这个字段为空，有提示信息。
我的处理方法：修改自定义校验规则，使用validator
在这里插入图片描述

<Form.Item
   noStyle
   name="idFile"
   rules={[
     {
       required: true,
       message: '请上传资料',
       validator: (rule, value) => {
         if(!value || (value?.fileList && !value?.fileList.length)){
           return Promise.reject('请上传资料')
         }
         return Promise.resolve();
       }
     },
   ]}
 >