[React]開發常見問題

 

此篇文章記錄一下一些初學者開發React時比較常見的一些問題。

(2024/08/22 更新)

1.DataGird綁定陣列類型需要id，處理以及注意事項如下說明

(1)如果資料類型有PK欄位，則可在綁定時將PK設定為id

例如：商品資料可用goods.map(x=>{return {...x,id:x.GdsNo}})

(2)如果資料類型沒有PK欄位，則建議於類型上新增id:number屬性，並且以rowNumber方式定義

例如：[{id:1,...},{id:2,....]

(3)不可使用index當作id使用，會造成處理以及效能的問題。

2.如果State類型是物件或陣列時，須注意更新時的處理，說明如下

(1)如果是要更新，需要先用深拷貝(deep Copy)方式去處理，不然React會判斷記憶體位址相同，不會刷新畫面。

最簡單且最快的方式是透過JSON轉換，例如：let copyData=JSON.parse(JSON.stringify(originalData))

(2)更新時都建議以preState方式處理，避免閉包影響。

例如：setData(preData=>{preData.id=1;return preData})

3.DataGrid如果有自定義編輯輸入項，則需要透過Grid的apiRef去更新值。

4.DataGrid編輯的CallBack方法processRowUpdate()內須更新state屬性(因return newrow時已經透過apiref刷新畫面，所以更新State時不需要用深Copy的方式處理，以免重複刷新畫面)

5.發佈前須將未使用的定義刪除(VSCODE的黃色虛線)，正常使用Vite就可以直接跑"npm run build"就會出現錯誤，刪除的訣竅列於下方

(1)未使用的import可使用Quickfixed的DeleteAll Unuse import 去刪除

(2)未使用的變數則需手動刪除。

(3)未使用的方式變數有兩種方法可以處理，一是刪除，二是變數前加上underline，例如_params

6.如果需要使用日期相關操作可參考dayjs。

7.有時在發布到Remote時React-dom會出現錯誤訊息,目前處理方式是清除瀏覽器暫存後就正常了(特別是Edge)。

8.RWD 開發注意事項：

(1)透過Mui.Grid2去排版元素，預設Breakpoint如下

xs, extra-small: 0px

sm, small: 600px

md, medium: 900px

lg, large: 1200px

xl, extra-large: 1536px

(2)因左側Menu在md以上的裝置上會站左邊版面，故開發時須注意左側Menu開啟時不要破版。

9.