Question

我想创建一个函数，而不是几行重复的代码。我有这个模块。它可以工作，但是我想优化这段代码。

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

Answer 1

我建议您为Select创建一个单独的组件，并将所有相关信息传递给该组件。该组件将负责过滤数据并渲染ui元素。

您需要传递给选择组件的数据将是：

数据：呈现选项

filterKey：过滤出数据

标签：选择字段的默认标签

change：处理更改的功能

赞：

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

Answer 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组数据

代码优化。一个函数而不是几行重复的代码

2 个答案: