總結最近React組件開發遇到的一些問題

1. 深淺拷貝的問題

做了一個審批鏈的彈窗頁面,其中有一個通過後端獲取數據,根據不同的type顯示數據或者顯示輸入框,做數據收集的一個東西,提交出錯時回去編輯輸入框發現一閃而逝,輸入框不見了,究其原因,看了眼控制檯並沒有報錯,然後看狀態管理和生命週期,還有表單的一些api都查了一遍,沒有發現問題,最後通過大佬指點(大佬還真的就是大佬), 說這是一個深淺拷貝的問題,因爲渲染的數據還被引用着,提交的時候被我改了type,回顯的時候就不在是一個輸入框了,所以提交之前得做點什麼

//把數組重新JSON解析一遍 就是一個最簡單深拷貝了
const arr = JSON.parse(JSON.stringify(applyChainArr))
// 然後拿到這個新的arr去做事~ 就這

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;
    }
  }
}