如果物件具有“null”值，則反應JS過濾器問題

我有一個可以從資料庫回傳空值的檔案串列。即 documentAuthor 和 featureId。

用戶可以通過單擊每列的標題部分來過濾串列。即 documentAuthor 或 featureID 等。

如果屬性為空，我希望它們在 UI 中仍然可見。我在下面所做的過濾由于某種原因防止了這種情況的發生 - 如果我注釋掉 documentAuthor 和 featureId 的過濾邏輯，則顯示正確的記錄數量。

如何解決此過濾問題？這 ”？” 在 documentAuthor 和 featureId 上是檢查它是被填充還是為空。

我的過濾：

const [filters, setFilters] = React.useState({
    documentAuthor: '',
    documentName: '',
    documentSource: '',
    documentType: 'All',
    documentUploadDateFrom: '',
    documentUploadDateTo: new Date().toISOString(),
    featureId: '',
    fileFormat: '',
  });





 useEffect(() => {
    setDocuments(claimsStore.getIncomingDocuments());

    const filteredDocuments = documents.filter(
      (document) =>
        document.documentAuthor?.toLowerCase().includes(filters.documentAuthor.toLowerCase()) &&
        document.documentName?.toLowerCase().includes(filters.documentName.toLowerCase()) &&
        document.documentSource?.toLowerCase().includes(filters.documentSource.toLowerCase()) &&
        document.documentType.includes(filters.documentType === 'All' ? '' : filters.documentType) &&
        document.featureId?.includes(filters.featureId) &&
        document.mimeType.toLowerCase().includes(filters.fileFormat.toLowerCase()) &&
        document.uploadDateTime > filters.documentUploadDateFrom &&
        document.uploadDateTime < filters.documentUploadDateTo,
    );
    
    setRows(
      filteredDocuments.map((document) =>
        createData(
          document.documentAuthor ?? '',
          document.documentMetadataId.toLocaleString(),
          document.documentMetadataId.toLocaleString(),
          document.documentName ?? '',
          document.documentSource ?? '',
          document.documentType,
          document.featureId ?? '',
          document.mimeType,
          document.uploadDateTime,
        ),
      ),
    );
  }, [claimsStore, documents, filters]);

uj5u.com熱心網友回復：

當使用帶有 null 物件的可選鏈接時，不會評估后續屬性訪問，參見https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining#short-circuiting。

當 documentAuthor 或 featureId 屬性為 null 時，整個運算式回傳 undefined，這是假的，因此檔案被從集合中過濾掉。您需要像這樣顯式地允許空值：

const filteredDocuments = documents.filter(
      (document) =>
          // !document.documentAuthor is a shortcut to document.documentAuthor == null
          (!document.documentAuthor || document.documentAuthor.toLowerCase().includes(filters.documentAuthor.toLowerCase())) &&
          document.documentName?.toLowerCase().includes(filters.documentName.toLowerCase()) &&
          document.documentSource?.toLowerCase().includes(filters.documentSource.toLowerCase()) &&
          document.documentType.includes(filters.documentType === 'All' ? '' : filters.documentType) &&
          (!document.featureId || document.featureId.includes(filters.featureId) &&
          document.mimeType.toLowerCase().includes(filters.fileFormat.toLowerCase()) &&
          document.uploadDateTime > filters.documentUploadDateFrom &&
          document.uploadDateTime < filters.documentUploadDateTo,
    );
    
setRows(
    filteredDocuments.map((document) =>
        createData(
            document.documentAuthor ?? '',
            document.documentMetadataId.toLocaleString(),
            document.documentMetadataId.toLocaleString(),
            document.documentName ?? '',
            document.documentSource ?? '',
            document.documentType,
            document.featureId ?? '',
            document.mimeType,
            document.uploadDateTime,
        ),
    ),
);

標籤：javascript反应打字稿过滤

上一篇：樣式組件、Typescript、flex-box、flexbox無法正確顯示

下一篇：在打字稿中重復n次包裝錯誤的失敗承諾