Удаление с массива, добавление в массив. (React / JS)

581

24 октября 2017, 03:42

Добрый день, есть массив данных, мне нужно с этих данных вывести на FE name но при этом отправить на BE code. Одинаковые code на BE может уйти несколько:

[
  {
    "name": "RAILCARD",
    "code": "HMF"
  },
  {
    "name": "16-25 RAILCARD",
    "code": "YNG"
  },
  {
    "name": "NETWORK RAILCARD",
    "code": "NEW"
  },
  {
    "name": "SENIOR RAILCARD",
    "code": "SRN"
  },
  {
    "name": "ANNUAL GOLD CARD",
    "code": "NGC"
  },
  {
    "name": "JCP DISCOUNT CARD",
    "code": "JCP"
  },
  {
    "name": "FAMILY & FRIENDS RCD",
    "code": "FAM"
  },
  {
    "name": "DISABLED ADULT",
    "code": "DIS"
  },
  {
    "name": "DISABLED CHILD",
    "code": "DIC"
  },
  {
    "name": "TWO TOGETHER R/CARD",
    "code": "2TR"
  }
]

Это мой state:

constructor(props) {
    super(props);
    this.state = {
        railcards: railcards.map((key) => key.name),
        chipData: [],
        chipCode: [],
    };
    this.search = this.search.bind(this);
}

Скрипт добавления + отправка на BE, тут мы находим в наших данных поле с name и записываем в отдельный state code :

async search() {
    let chipsFound = railcards.find((e) => {
        let result;
        self.state.chipData.map((key) => key.label).forEach(function(item, index) {
            result = e.name[index] === item[index];
        });
        return result;
    });
    let chips = chipsFound ? chipsFound.code : undefined;
    self.setState({chipCode: self.state.chipCode.concat(chips)})
}

Далее скрипт удаления:

handleRequestDelete = (key) => {
    this.chipData = this.state.chipData;
    const chipToDelete = this.chipData.map((chip) => chip.key).indexOf(key);
    this.chipData.splice(chipToDelete, 1);
    this.setState({
        chipData: this.chipData,
    });
    this.search()
};

Помогите с удалением, и если есть лучшее решение добавление в массив, тоже подскажите :-)

Заметил небольшую бажину такую как: если удаляем элемент с массива c key: 3 и пробуем еще раз добавить элемент, то элемент принимает в себя повторяющийся key. (т.е. добавляет элемент идентичный последнему элементу массива с таким же ключем)

Answer 1

Решил свою проблему так (кому будет полезно), можете предлагать свои варианты, буду только рад:

Функция добавления name в state с нужным нам ключем в chipData:

handleUpdateInput = (searchText) => {
    let chipKey;
    for (let i = 0; i < this.state.chipCode.length; i++) {
        chipKey = i + 1;
    }
    if(this.state.chipData.map((chip) => chip.key).indexOf(chipKey) > -1) {
        chipKey = this.state.chipData.length + 1;
    } else {
        for (let i = 0; i < this.state.chipCode.length; i++) {
            chipKey = i + 1;
        }
    }
    this.setState({
        chipData: this.state.chipData.concat([{key: chipKey === undefined ? 0 : chipKey, label: searchText}]),
        searchText: '',
    });
};

Функция добавления code в state с нужным нам ключем в chipCode:

handleRequestAdd = () => {
    let chipsFound = railcards.find((e) => {
        let result;
        this.state.chipData.map((key) => key.label).forEach(function(item) {
            result = e.name === item;
        });
        return result;
    });
    let chips = chipsFound ? chipsFound.code : undefined;
    let chipKey;
    for (let i = 0; i < this.state.chipData.length; i++) {
        chipKey = i;
    }
    if(this.state.chipCode.map((chip) => chip.key).indexOf(chipKey) > -1) {
        chipKey = this.state.chipCode.length + 1;
    } else {
        for (let i = 0; i < this.state.chipData.length; i++) {
            chipKey = i;
        }
    }
    this.setState({chipCode: this.state.chipCode.concat([{key: chipKey, label: chips}])})
};

Функция удаления с двух state chipCode и chipData по ключу:

handleRequestDelete = (key) => {
    this.chipData = this.state.chipData;
    this.chipCode = this.state.chipCode;
    const chipToDelete = this.chipData.map((chip) => chip.key).indexOf(key);
    const chipCodeToDelete = this.chipCode.map((chip) => chip.key).indexOf(key);
    this.chipData.splice(chipToDelete, 1);
    this.chipCode.splice(chipCodeToDelete, 1);
    this.setState({
        chipData: this.chipData,
        chipCode: this.chipCode,
    });
    if(this.state.origin.length && this.state.destination.length) {
        this.search()
    }
};