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，它是用于保持键值对的数据结构。它将为您提供最佳的大数据性能。

{{1}}

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

如何使用Filter with ReactJS来防止显示数组中的重复项

2 个答案: