React Table v7 列过滤功能异常：如何实现对‘Not Approved’状态的搜索

这个问题的核心在于：React Table的默认过滤逻辑是基于你配置的accessor返回值进行匹配的。你的accessor是'approvedBy.fname'，当approvedBy为null时，这个accessor会返回undefined，而你在Cell里渲染的Not Approved只是前端展示文本，并没有被包含到过滤的数据源里，所以自然搜不到。

下面给你两种可行的解决方案：

方案一：自定义Accessor函数，统一返回展示文本 #

直接把accessor改成函数，让它返回和Cell里完全一致的内容，这样默认过滤就能直接匹配到Not Approved：

{ 
  Header: 'Approved By', 
  // 改成函数式accessor，返回和Cell显示一致的文本
  accessor: row => row.approvedBy ? `${row.approvedBy.fname} ${row.approvedBy.lname}` : 'Not Approved',
  Filter: ColumnFilter, 
  disableSortBy: true, 
  // Cell可以简化，直接用accessor返回的value
  Cell: e => { 
    return e.value.includes('Not Approved') ? (
      <Tag colorScheme="red">{e.value}</Tag>
    ) : (
      e.value
    );
  }, 
}

这样修改后，当approvedBy为null时，accessor会返回'Not Approved'，过滤器输入这个文本时，就能精准匹配到对应行，同时Cell组件也能简化不少。

方案二：保留原Accessor，自定义过滤逻辑 #

如果你不想修改accessor的结构，可以在列配置里添加自定义的filter函数，专门处理Not Approved的筛选逻辑：

{ 
  Header: 'Approved By', 
  accessor: 'approvedBy.fname', 
  Filter: ColumnFilter, 
  disableSortBy: true, 
  // 添加自定义过滤逻辑
  filter: (rows, id, filterValue) => {
    const lowerFilter = filterValue.toLowerCase();
    // 当输入的是'Not Approved'时，筛选approvedBy为null的行
    if (lowerFilter === 'not approved') {
      return rows.filter(row => !row.original.approvedBy);
    }
    // 其他情况按fname进行模糊匹配
    return rows.filter(row => {
      const fname = row.values[id];
      return fname ? fname.toLowerCase().includes(lowerFilter) : false;
    });
  },
  Cell: e => { 
    return ( 
      <> 
        {e.row.original.approvedBy ? ( 
          `${e.row.original.approvedBy.fname} ${e.row.original.approvedBy.lname}` 
        ) : ( 
          <Tag colorScheme="red">Not Approved</Tag> 
        )} 
      </> 
    ); 
  }, 
}

这个方案里，我们手动判断了过滤值是否为Not Approved（大小写不敏感），如果是就筛选approvedBy为null的行；否则按原来的fname字段进行模糊匹配。

两种方案都能解决你的问题，方案一更简洁直观，推荐优先使用~

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