如何使用带有 ReactJS 的过滤器来防止显示数组中的重复项

Question

我有一个包含三个下拉列表的 ReactJS 页面，其中两个下拉列表显示重复值。这些值是从 json 文件中使用的。我研究了使用过滤器删除重复项，但我不确定在使用 React JS 和 Fetch 时如何将它应用到我的数组中。 我创建了一个使用过滤器方法的函数，但我不确定如何将它实现到数据上：[]，它包含从 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 还是很陌生。

Answer 1

您可以使用Map，它是一种用于保存键值对的数据结构。它将为您提供大数据的最佳性能。

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

Answer 2

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;
    } , []);
}