Как использовать фильтр с ReactJS для предотвращения отображения дубликатов в массиве - PullRequest
Новая
       18

Как использовать фильтр с ReactJS для предотвращения отображения дубликатов в массиве

0 голосов
/ 07 мая 2018

У меня есть страница ReactJS с тремя раскрывающимися списками, два из раскрывающихся списка отображают повторяющиеся значения. Значения потребляются из файла JSON. Я исследовал использование фильтра для удаления дубликатов, но я не уверен, как применить его к моему массиву при использовании React JS вместе с Fetch. Я создал функцию, которая использует метод фильтра, но я не уверен, как мне реализовать ее в data: [], которая содержит данные, полученные из файла json. Это пример файла JSON: https://api.myjson.com/bins/b1i6q

Это мой код : 

import React, { Component } from "react";

class Ast extends Component {
  constructor() {
    super();
    this.state = {
      data: [],
      cfmRateFactor: "10"
    };
  } //end constructor

  change = e => {
    this.setState({
      [e.target.name]: e.target.value
    });
  }; //end change

     removeDups(array) {
    return array.reduce((result, elem) => {
        if (!result.some((e) => e.clientName === elem.clientName)) {
            result.push(elem);
        }
        return result;
    } , []);
}

  componentWillMount() {
    fetch("https://api.myjson.com/bins/b1i6q", {
      method: "GET",
      headers: {
        Accept: "application/json",
        "Content-type": "application/json"
      }
      /*body: JSON.stringify({
            username: '{userName}',
            password: '{password}'
        })*/
    }) /*end fetch */
      .then(results => results.json())
      .then(data => this.setState({ data: data }));
  } //end life cycle

  render() {
    console.log(this.state.data);
    return (
      <div>
        <div className="container">
          <div className="astContainer">
            <form>
              <div>
                <h2>Memeber Selection:</h2>

                {["clientName", "siteName", "segmentName"].map(key => (
                  <div className="dropdown-padding">
                    <select key={key} className="custom-select">
                      {this.state.data.map(({ [key]: value }) => (
                        <option key={value}>{value}</option>
                      ))}
                    </select>
                  </div>
                ))}
              </div>

              <div className="txt_cfm">
                <label for="example-text-input">Modify CFM Rate Factor:</label>
                <input
                  class="form-control"
                  type="textbox"
                  id="cfmRateFactor"
                  name="cfmRateFactor"
                  value={this.state.cfmRateFactor}
                  onChange={e => this.change(e)}
                />
              </div>
              <div>
                <div>
                  <button type="submit" className="btn btn-primary">
                    Submit
                  </button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    );
  }
}

export default Ast;

Могу ли я получить помощь с этим? Я все еще очень плохо знаком с использованием React JS.

Ответы [ 2 ]

0 голосов
/ 07 мая 2018

Вы можете использовать Карта , это структура данных для хранения пар ключ-значение. Это даст вам лучшую производительность для больших данных. 

removeDuplicates(arr) {
  const map = new Map();
  arr.forEach(v => map.set(v.abc_buildingid, v)) // having `abc_buildingid` is always unique
  return [...map.values()];
}


// this hook is better to start fetching data than componentWillMount
componentDidMount() {
    fetch("https://api.myjson.com/bins/b1i6q", {
      method: "GET",
      headers: {
        Accept: "application/json",
        "Content-type": "application/json"
      }
    })
    .then(results => results.json())
    .then(data => this.setState({ data: this.removeDuplicates(data) })); // use the defined method
} //end life cycle
0 голосов
/ 07 мая 2018

filter не решит вашу проблему. Но reduce будет.

Вы можете иметь следующее: 

function removeDups(array) {
    return array.reduce((result, elem) => {
        if (!result.some((e) => e.abc_buildingid === element.abc_buildingid)) {
            result.push(elem);
        }
        return result;
    } , []);
}
...