组件在React / Redux中显示两次

Question

  

函数1，它返回JSON数组。

apt-get install --reinstall libxcb-xinerama0

  

另一个函数“ rendercolumn（）”返回计划视图。

function allPlans()
{
    var all_plans = {
            'Option1' : {
                'free':{status:true,plantext:"5 Per Month"},
                'premium':{status:true,plantext:"Unlimited"},
                'vip':{status:true,plantext:"5 Per Month"}                            
            },
            'Option2' : {
                'free':{status:true,plantext:"Unlimited"},
                'premium':{status:true,plantext:"Unlimited"},
                'vip':{status:true,plantext:"Unlimited"}                            
            },
            'Option3' : {
                'free':{status:true,plantext:"Unlimited"},
                'premium':{status:true,plantext:"Unlimited"},
                'vip':{status:true,plantext:"Unlimited"}                            
            },
            'Option4':{
                'free':{status:true,plantext:"-"},
                'premium':{status:true,plantext:"Full Access"},
                'vip':{status:true,plantext:"Full Access"}                            
            },
            'Option5' : {
                'free':{status:true,plantext:"-"},
                'premium':{status:true,plantext:"3 Per Month"},
                'vip':{status:true,plantext:"3 Per Month"}                            
            },
            'Option6' : {
                'free':{status:true,plantext:"-"},
                'premium':{status:true,plantext:"-"},
                'vip':{status:true,plantext:"1 Portfolio"}                            
            },
            'Option7' : {
                'free':{status:true,plantext:"-"},
                'premium':{status:true,plantext:"-"},
                'vip':{status:true,plantext:"1 Per Month"}                            
            },
        }

    return all_plans;
}

  

之后，该组件称为“列”

function rendercolumn()
{
    const options = allPlans();
    var isrowclass = false;
    var getrowclass = "";
    const plansMap = Object.keys(options).reduce((acc, title) => {
        if (props.planname == 'free')
        {
            var plans = options[title]["free"];
        }
        else if(props.planname == 'premium')
        {
            var plans = options[title]["premium"];
        }
        else if(props.planname == 'vip')
        {
            var plans = options[title]["vip"];
        }

        Object.keys(plans).forEach(plan => 
        {
            if (!acc[plan])
            {
                acc[plan] = [];
            }

            if(isrowclass == true)
            {
                isrowclass = false;
                getrowclass = plan_item_gray;
            }
            else
            {
                isrowclass = true;
                getrowclass = plan_item;
            }

            acc[plan].push({
                title,
                status: plans.status,
                text: plans.plantext,
                rowclass: getrowclass,
            })
        });

        return acc;

    }, {})

    return (
        <div>
          {Object.keys(plansMap).map(plan => (
              <Column key={plan} data={plansMap[plan]} />
          ))}
        </div>
    )

}

最后，我调用了“ {rendercolumn（）}” 函数以在视图上显示数据。

现在，在以上所有代码中，我都可以按预期方式获得行，但它两次显示详细信息。

  

我得到的结果是：

  

我想要类似的结果

以上代码需要进行哪些更改？