React JS过滤含null值对象问题：保留null属性文档的解决方案

你的问题根源在于：当documentAuthor或featureId为null时，documentAuthor?.toLowerCase()会返回undefined，调用includes()方法时会直接得到false——哪怕对应的过滤输入框是空字符串，这些文档也会被过滤掉。

要解决这个问题，只需要把null字段默认转为空字符串，再进行包含判断即可，这样不管字段是null还是有实际值，都能和过滤条件正确匹配：

修改过滤逻辑中documentAuthor和featureId对应的两行代码：

// 原代码
document.documentAuthor?.toLowerCase().includes(filters.documentAuthor.toLowerCase()) &&
document.featureId?.includes(filters.featureId) &&

// 修改后
(document.documentAuthor ?? '').toLowerCase().includes(filters.documentAuthor.toLowerCase()) &&
(document.featureId ?? '').includes(filters.featureId) &&

修改后的完整过滤代码 #

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]);

逻辑说明 #

用?? ''运算符把null值转为空字符串后：

• 当过滤输入框为空时，空字符串包含空字符串的结果是true，所以null字段的文档会被保留
• 当过滤输入框有内容时，空字符串不包含目标内容，这些文档会被正确过滤，符合预期

内容的提问来源于stack exchange，提问作者Filth