後端返回的資料會不會不符合頁面上的展示，還是說後端返回的資料結構就是頁面上需要展示的，若後端不需要儲存，那麼前端即使需要展示的值，也要根據已有值實時計算

龙陌發表於2024-03-15
後端資料結構前端

後端返回的資料可能不一定完全符合前端頁面展示的需求，這取決於後端API設計和前端UI/UX的設計。
有時後端返回的資料可能是原始資料或者為了滿足資料庫儲存需求的結構化資料，而前端可能需要對這些資料進行處理以便更好地呈現給使用者。

  • 資料適配：
    如果後端返回的資料結構與前端展示所需不同，那麼前端通常需要在接收資料後進行轉換或對映以適應頁面展示需求。
    例如，將日期字串轉換為可讀格式，或者從巢狀物件中提取出特定欄位等。
const processBackendData = (backendData) => {
  return {
    // 根據前端需求重新組織資料結構
    displayField1: backendData.nestedObject.field1,
    displayField2: formatDateTime(backendData.date),
    // ...
  };
};
  • 動態計算值：
    對於那些不需要後端儲存但前端需要展示的值（比如根據其他欄位計算得出的結果），前端確實需要實時計算。
    正如之前提到的，可以使用 useEffect 或者表單庫提供的變更監聽功能來實時更新計算結果。

總之，前端和後端之間可能存在一定的資料解耦，前端應該具備資料處理和轉換的能力，以確保無論後端返回何種資料結構，都能正確、有效地在介面上展示。
同時，對於一些非儲存但需要展示的資料，前端應負責動態計算並更新檢視。

相關文章