0

У меня есть несколько селектов (их больше, но тут показал только два)

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

            </form>
        </div>

Для каждого селекта выполняется несколько строк кода. В этих строках я перебираю и фильтрую props.data.nodes. Получаю массивы unique, unique2 и каждый массив использую в своем селекте. Эти строки кода отличаются только одним значением. Хочу написать функцию, которая заменит эти фактически дублирующиеся строки кода. В целом всё работает, ошибок нет, но нужна оптимизация кода.

    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);
    });   // выбираю нужные значения и подставляю их во второй селект

Ниже написал, какую универсальную функцию я хочу получить. Данная функция показана, как пример, она не работает. Данная функция должна выполняться для каждого селекта, должна получать от каждого свое уникальное значение и на выходе выдавать соответствующий массив для каждого селекта. После этого каждый селект использует свой массив и рендерится на странице. А как переписать правильно - не могу сообразить..

const func = (myData) => {
    let arr = props.data.nodes.map((element) => element.myData);
    let unique = arr.filter(function(elem, index, self) {
        return index === self.indexOf(elem);
    });

}

всё приложение целиком: https://github.com/DrGreenNow/Relate-data

1 ответ 1

1

const getUniqueKeys = (arr, key) => (
  arr
    .map(el => el[key])
    .filter((el, i, self) => i === self.indexOf(el))
);

/* функция выше является ответом */

class Form extends React.Component {

  render() {
    const { data, filterOurData, filterOurLocation, filterOurService, filterOurDeviceType } = this.props;

    /* пример использования */
    const vendors = getUniqueKeys(data.nodes, "vendor");
    const locations = getUniqueKeys(data.nodes, "location");
    const services = getUniqueKeys(data.nodes, "service");
    const types = getUniqueKeys(data.nodes, "type");
    
    return(
        <div className='wrapper'>
            <form>
                <label>
                    <p className="nameOfInput">Vendor</p>
                    <select onChange={filterOurData} >
                        <option>Choose vendor</option>
                        {vendors.map((element) => <option  key={element.toString()}>{element}</option>)}
                    </select>
                </label>
                <label>
                    <p className="nameOfInput">Location</p>
                    <select onChange={filterOurLocation} >
                        <option>Choose location</option>
                        {locations.map((element) => <option key={element.toString()}>{element}</option>)}
                    </select>
                </label>
                <label>
                    <p className="nameOfInput">Service</p>
                    <select onChange={filterOurService} >
                        <option>Choose service</option>
                        {services.map((element) => <option key={element.toString()}>{element}</option>)}
                    </select>
                </label>
                <label>
                    <p className="nameOfInput">Device Type</p>
                    <select onChange={filterOurDeviceType} >
                        <option>Choose device type</option>
                        {types.map((element) => <option key={element.toString()}>{element}</option>)}
                    </select>
                </label>
            </form>
        </div>
    );
  }    
}

class App extends React.Component {
  state = {
    data: null
  }
  
  componentDidMount() {
    fetch(`https://raw.githubusercontent.com/DrGreenNow/Relate-data/master/src/NavigationTree.json`)
      .then(res => res.json())
      .then(data => this.setState({ data }))
      .catch(console.error)
  }
  
  render() {
    const { data } = this.state;
    return data && <Form data={data} />
  }
}

ReactDOM.render(<App/>, document.getElementById('root'));
form {
  margin: 30px 30px 30px 200px;
  display: flex;
  flex-direction: column;
}

select {
  margin: 5px;
  width: 250px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.nameOfInput {
  width: 200px;
  padding-left: 40px;
  font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.