使用过滤器函数 Return React 组件 - 代码审查

Question

我不明白我在这里做错了什么。我在我的应用程序中使用 Immutable.js & React。我正在调用 Immutable.js 的 filter 函数以根据 if 条件和 return React 组件数组优化集合。

其实是return'svgTemplateState'而不是React组件集合

        let getUpdatedTem = ( renderType, svgTemplateState ) => {
            switch( renderType ){
            case( "Template Selection" ):
                return( svgTemplateState.filter(( templateType ) => {
                    if( templateType.get( "templateNo" ) > -1 ){
                        let temType = templateType.get( "type" );
                        return(
                            <TemplatePath
                             temData = { templateType }
                             key = { temType } />
                        );
                    }
                }));
            case( "Preview" ):
...

Answer 1

不可变过滤器应该 return 一个布尔值，表明您是否希望模板成为您正在 return 的集合的一部分。在您的例子中，您正在 returning 一个 React 组件。

您正在迭代 svgTemplateState，这似乎是一个地图（我不太清楚它是什么）。您应该迭代的是模板集合，并检查集合中每个模板的模板编号。你会得到类似（简化）的东西：

let newCollection = templatesCollection.filter( template => return template.get( "id" ) > -1);

Answer 2

您要查找的是第一个符合条件的Item吗？像 .findEntry() ?

Answer 3

            return( svgTemplateState.filter(( templateType ) => {
                if( templateType.get( "templateNo" ) > -1 ){
                    let temType = templateType.get( "type" );
                    return(
                        <TemplatePath
                         temData = { templateType }
                         key = { temType } />
                    );
                }
            }));

假设svgTemplateState是一个数组，将上面代码中的"filter"方法替换为"map"。如果 svgTemplateState 是成对的对象，则使用 for...in 迭代 svgTemplateState，检查条件并将组件推送到一个临时对象，您可以在循环后 return。

使用过滤器函数 Return React 组件 - 代码审查

Using Filter Function to Return React Component - Code Review

javascript

reactjs

immutable.js

redux