javascript - react/redux 中组件显示两次

Question

函数 1 返回 JSON 数组。

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;
}

另一个函数“rendercolumn()”返回计划视图。

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

}

之后称为组件“列”

const Column = ({data}) => (

    <div>
        {data.map(option => (
          <div className={option.rowclass}>{option.text}</div>
        ))}
    </div>
)

最后我调用了“{rendercolumn()}”函数来显示视图上的数据。

现在在上面的所有代码中，我得到了预期的行，但它显示了两次细节。

我得到的结果如下：

我想要这样的结果：

上面的代码需要做哪些改动？

标签： javascriptreactjsreduxreact-redux