Блог

Главная - Вопросы по программированию - Оптимизация кода. Одна функция вместо нескольких повторяющихся строк кода

Оптимизация кода. Одна функция вместо нескольких повторяющихся строк кода

#reactjs

#reactjs

Вопрос:

Я хочу создать одну функцию вместо нескольких повторяющихся строк кода. У меня есть этот модуль. Это работает, но я хочу оптимизировать этот код. 

 import React from 'react';

const form = (props) => {
    //start
    let arr = props.data.nodes.map((element) => element.vendor);
    let unique = arr.filter(function(elem, index, self) {
        return index === self.indexOf(elem);
    });
    let arr2 = props.data.nodes.map((element) => element.location);
    let unique2 = arr2.filter(function(elem, index, self) {
        return index === self.indexOf(elem);
    });
    let arr3 = props.data.nodes.map((element) => element.service);
    let unique3 = arr3.filter(function(elem, index, self) {
        return index === self.indexOf(elem);
    });
    let arr4 = props.data.nodes.map((element) => element.type);
    let unique4 = arr4.filter(function(elem, index, self) {
        return index === self.indexOf(elem);
    });
  //end
    return(
        <div className='wrapper'>
            <form>
                <label>
                    <p className="nameOfInput">Vendor</p>
                    <select onChange={props.filterOurData} >
                        <option>Choose vendor</option>
                        {unique.map((element) => <option  key={element.toString()}>{element}</option>)}
                    </select>
                </label>
                <label>
                    <p className="nameOfInput">Location</p>
                    <select onChange={props.filterOurLocation} >
                        <option>Choose location</option>
                        {unique2.map((element) => <option key={element.toString()}>{element}</option>)}
                    </select>
                </label>
                <label>
                    <p className="nameOfInput">Service</p>
                    <select onChange={props.filterOurService} >
                        <option>Choose service</option>
                        {unique3.map((element) => <option key={element.toString()}>{element}</option>)}
                    </select>
                </label>
                <label>
                    <p className="nameOfInput">Device Type</p>
                    <select onChange={props.filterOurDeviceType} >
                        <option>Choose device type</option>
                        {unique4.map((element) => <option key={element.toString()}>{element}</option>)}
                    </select>
                </label>
            </form>
        </div>
    );
}

export default form;

Я хочу оптимизировать код от «начала» до «конца», но я не могу понять, как.

Ссылка на мое маленькое приложение:https://github.com/DrGreenNow/Relate-data

Ответ №1:

Я предлагаю вам создать отдельный компонент для Select и передать всю соответствующую информацию этому компоненту. Этот компонент будет отвечать за фильтрацию данных и визуализацию элементов пользовательского интерфейса.

Данные, которые вам нужно передать для выбора компонента, будут:

данные: для отображения параметров

filterKey: для фильтрации данных

метка: метка по умолчанию для поля выбора

изменение: функция для обработки изменений

Вот так:

 const form = (props) => {
    return(
        <div className='wrapper'>
            <form>
                <Select label="Vendor" onChange={props.filterOurData} filterKey="vendor" data={props.data.nodes} />
                <Select label="Location" onChange={props.filterOurLocation} filterKey="location" data={props.data.nodes} />
                <Select label="Service" onChange={props.filterOurService} filterKey="service" data={props.data.nodes} />
                <Select label="Device Type" onChange={props.filterOurDeviceType} filterKey="type" data={props.data.nodes} />
            </form>
        </div>
    );
}


const Select = (props) => {
    let arr = props.data.map((element) => element[props.filterKey]);
    let unique = arr.filter((elem, index, self) => index === self.indexOf(elem));

    return (
        <label>
            <p className="nameOfInput">{props.label}</p>
            <select onChange={props.onChange} >
                <option>Choose {props.label}</option>
                {unique.map((element) => <option  key={element.toString()}>{element}</option>)}
            </select>
        </label>
    )
}

Комментарии:

1. Этот ответ лучше моего, используйте этот

2. Вы заранее даете мне ответ на мою другую проблему — об отдельном компоненте для выбора. Спасибо!

Ответ №2:

Я попытался немного упростить это

     
    // setup dummy data
    let props = {
      data: {
      nodes: []
      }
    };
    for (let i = 0; i<10; i  ) {
        let node = {
        vendor: "vendor"  i,
        location: "location"   i,
        service: "service"   i,
        type: "type"   i
      }
    props.data.nodes.push(node)
    }
    
    //start
    let unique = []
    let unique2 = []
    let unique3 = []
    let unique4 = []
    
    props.data.nodes.map((element) => {
      unique.push(element.vendor)
      unique2.push(element.location)
      unique3.push(element.service)
      unique4.push(element.type)
    })
    //end
    
    console.log(unique)
    console.log(unique2)
    console.log(unique3)
    console.log(unique4)
    console.log(props.data.nodes)

Одна карта -> 4 массива данных