多过滤器映射 React Js

Question

我正在编写具有多个过滤器的对象搜索。这两个过滤器执行以下检查

1) 是分配给案例的人员 (caseWorkers) 2）是否存在这种类型的文档（resoStatus）

我已经写出了过滤器的前面部分，其功能如下：

如果用户单击名称来搜索 caseWorkers（“firstName lastName”），它会在呈现搜索的页面上称为过滤器的数组中输入并结束该名称的字符串

如果用户点击文档，它会推送到相同的字符串数组“hasRepresentation”“hasTaxForms”。

正在搜索的模型（潜在客户）类似于：

{
fullName: '',
resoStatus:{
representation:[],
federalReso:[],
},
caseWorkers:{
originators:[],
taxPreparers:[]
}
} 

所以有一个看起来像这样的对象数组和一个称为过滤器的字符串数组，带有名称或真假评估。

filters = ["Mickey Gray", "hasRepresentation"]

所以我需要映射过滤器以查找字符串 /has/ 或 ' ' 的某些方面，然后映射通过 caseWorkers 和 resoStatus 中的子数组过滤的潜在客户。

我非常清楚自己想要什么，但我不知道如何对需要考虑的所有不同数组进行分层。这是最新版本的 react 代码。

  {(filters.length > 0 && prospects.length > 0 && prospect.caseWorkers) ||
        (filters.length > 0 && prospects.length > 0 && prospect.resoStatus)
          ? prospects.filter(
              (prospects, filters, i) =>
                prospects[i].caseWorkers.originators.name ===
                filters
                  .map((filter) => filter.includes(" "))
                  .map((filtered) => (
                    <ProspectItem
                      key={filtered._id}
                      filtered={filtered}
                      prosp={prosp}
                    />
                  ))
            )
          : prospects.map((prospect) => (
              <ProspectItem
                key={prospect._id}
                prospect={prospect}
                prosp={prosp}
              />
            ))}

这是我考虑使用映射过滤器来查找潜在客户的另一种方法。

        {(filters.length > 0 && prospects.length > 0 && prospect.caseWorkers) ||
        (filters.length > 0 && prospects.length > 0 && prospect.resoStatus)
          ? filters.map((filter) =>
              prospects
                .find((prospect) => prospect.caseWorkers.name === filter)
                .map((filtered) => (
                  <ProspectItem
                    key={filtered._id}
                    filtered={filtered}
                    prosp={prosp}
                  />
                ))
            )
          : prospects.map((prospect) => (
              <ProspectItem
                key={prospect._id}
                prospect={prospect}
                prosp={prosp}
              />
            ))}

我如何堆叠多个过滤器并评估同一对象的多个部分以获得地图的值。

Answer 1

所以我没有完全理解这个问题，但我认为需要意识到的重要一点是，在 react 中你也可以使用普通的 javascript 变量。 您不必将所有内容都表达为表达式，也可以使用语句。

例如

const MyComponent = ({items, filters})=>{
    const processedFilters = processFilters(filters); // returns filter functions for instance
    const filteredItems = filters.reduce((items, filter)=>filter(items), items);
    return <div>
        {filteredItems.map(item=><div>{item.something}</div>)}
    </div>;
}

在这种情况下，processFilters 可能看起来像这样：

function processFilters(filters){
    return filters.map(filter=>{
        if(filter.match(/^has/)) 
            return item=>item[filter];
        else if(filterMatchesSomeCondition(filter)) 
            return item=>checksSomethingElse(filter, item);
    })
}

这种表示法可能不是最直观的做事方式，所以这段代码的实现大致相同，并且可能更容易理解：

const MyComponent = ({items, filters})=>{
    for(let filter of filters){
        if(filter.match(/^has/)) 
            items = items.filter(item=>item[filter]==true);
        else if(filterMatchesSomeCondition(filter)) 
            items = items.filter(item=>checksSomethingElse(filter, item));
    }
    return <div>
        {items.map(item=><div>{item.something}</div>)}
    </div>;
}

我希望这些信息有用。 如果没有，如果您能更抽象地表述问题，我很乐意提供帮助。

我也不确定将过滤器格式化为字符串是否是最好的主意，因为它相当模棱两可。像这样的对象数组很简单：

[{type: "hasName", value: "John"}, {type:"hasMaxSomething", value:3}]

已经有助于使过滤器的目的更易于理解。它还可以防止错误，因为您将能够为过滤器传递更多数据，而无需以奇怪的方式进行编码。