总结最近React组件开发遇到的一些问题

1. 深浅拷贝的问题

做了一个审批链的弹窗页面,其中有一个通过后端获取数据,根据不同的type显示数据或者显示输入框,做数据收集的一个东西,提交出错时回去编辑输入框发现一闪而逝,输入框不见了,究其原因,看了眼控制台并没有报错,然后看状态管理和生命周期,还有表单的一些api都查了一遍,没有发现问题,最后通过大佬指点(大佬还真的就是大佬), 说这是一个深浅拷贝的问题,因为渲染的数据还被引用着,提交的时候被我改了type,回显的时候就不在是一个输入框了,所以提交之前得做点什么

//把数组重新JSON解析一遍 就是一个最简单深拷贝了
const arr = JSON.parse(JSON.stringify(applyChainArr))
// 然后拿到这个新的arr去做事~ 就这

看了一篇文章，说这种方式的深拷贝在某些场景下容易出问题，得用递归的方式才更安全。。。
https://juejin.cn/post/7113829141392130078

	//函数拷贝
    const copyObj = (obj = {}) => {
    		//变量先置空
            let newobj = null;  

            //判断是否需要继续进行递归
            if (typeof (obj) == 'object' && obj !== null) {
                newobj = obj instanceof Array ? [] : {};
                //进行下一层递归克隆
                for (var i in obj) {
                    newobj[i] = copyObj(obj[i])
                }
                //如果不是对象直接赋值
            } else newobj = obj;
            
            return newobj;    
        }

2. 表单的一些api,用的是antd 的组件Form

const [form] = Form.useForm() 
//Form有一个props就是form 绑定之后就可以做一些事情了
form.resetFields() //重置表单 一般要清空数据时操作
form.validateFields().then(values=>{
// 返回表单值
}).catch(err=>{
	//校验的错误信息 不过一般不这样做 因为页面上失去焦点时会显示错误提示信息
	 const errorMsg = err.errorFields[0].error[0]
	 message.error(errorMsg)
}) 
//用于回显或者主动设置表单值
form.setFieldsValues({
name:"Hello World!"
})

3. scss 的一点小技巧

$textColor: #606266; /* 定义常量 */
/*
	修改antd组件自带样式 得加个 :global{ } 包裹着才行
*/
:global{
	.ant-modal{
			.ant-model-content{
				color: $textColor;
			}
	}
}

/*mixin用法*/
@mixin fontStyle($fontSize) {
  font-size: $fontSize;
  font-family: 'mono-font';
}
.header {
 @include fontStyle(20px);
}
.footer{
 	@include fontStyle(15px);
}

/* 遍历 */
.input{
	&:focus{
		outline: none;
	}
  @each $browser in -webkit-input-,-moz-,-ms-input-,''{
    &::#{$browser}placeholder {
    		color: #bfbfbf;
    }
  }
}