如果对象具有"null"值，则反应 JS 过滤器问题

Question

我有一个可以从数据库返回null值的文档列表。即documentAuthor和featureId。

用户可以通过单击每列的标题部分来筛选列表。即documentAuthor或featureID等

如果属性为null，我希望它们在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]);

Answer 1

使用可选链接时，对于null对象，不会评估后续的属性访问，cfhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining#short-电路。

当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,
),
),
);