Отображение компонентов дважды при просмотре в режиме реагирования / избыточности - PullRequest
0 голосов
/ 08 октября 2018

Функция 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 ()}" для отображения данных наview.

Теперь во всем приведенном выше коде я получаю строки, как и ожидалось, но он показывает детали дважды.

Я получаю результат как:

enter image description here

Я хочу получить результат как:

enter image description here

Чтоизменения должны быть сделаны в приведенном выше коде?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...