如何在ReactJS中使用lodash获得独特的价值？

里亚·卡普里亚（Riya Kapuria）

如何在ReactJS中使用lodash获得独特的价值？现在，我正在获取所有数据。但是如何避免打印重复数据？实际上，这是一个过滤器盒。因此，我必须避免数据重复。谁能帮我吗？

功能：

  comboClick () {
    var apiBaseUrl = "http://api.eventsacross-stage.railsfactory.com/api/";
    var input = this.state.search_event;
    let self = this;
    axios.get(apiBaseUrl+'v1/events/?on_dashboard=false'+input)
    .then(function (response) {
       let events = response.data.events;
       self.setState({events: events});
        console.log(response);
     })
     .catch(function (error) {
       console.log(error);
     });
   }

Jsx部分：

  <div className="dropdown text-center">
                  <button
                    className="btn btn-default dropdown-toggle"
                    type="button"
                    data-toggle="dropdown"
                    style={{width: "50%"}}
                    onClick={this.comboClick.bind(this)}>
                      Place
                      <span className="caret"></span>
                  </button>
                  <ul className="dropdown-menu">
                    {this.state.events.map(function (event, i) {
                      return (
                        <div key={i}>
                          {event.locations.map(function (locations, j) {
                            return (
                              <li key={j}><p>{locations.city}</p></li>
                            )
                          })}
                        </div>
                      )
                    })}
                  </ul>
                </div>

胡安

您可以_.uniqBy根据文档使用：

此方法类似于_.uniq，不同之处在于它接受iteratee，后者会为数组中的每个元素调用以生成用于计算唯一性的标准。结果值的顺序取决于它们在数组中出现的顺序。使用一个参数（值）调用iteratee。

我添加了一个示例：

var locations = 
[
 {city:"city1"},
 {city:"city2"},
 {city:"city3"},
 {city:"city1"},
];

var locationsUnique = _.uniq(locations, 'city');

console.log(locationsUnique);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>

更新：

从评论中共享的方法，我猜测您要执行的操作类似于：

comboClick() {
  var apiBaseUrl = "api.eventsacross-stage.railsfactory.com/api/";
  var input = this.state.search_event;
  let self = this;
  axios.get(apiBaseUrl + 'v1/events/?on_dashboard=false' + input).then(function(response) {
    let events = response.data.events;
    for (var i = 0; i < response.data.events_count; i++) {
      var obj = response.data.events[i];
      console.log(obj.locations);
      //Assuming that obj.locations has the locations that you want to display
      var locationsUnique = _.uniq(obj, 'city'); //Added this line
      console.log(locationsUnique); //Added this line
    }
    for (var j = 0; j <= obj; j++) {}
    self.setState({events: events});
  }).catch(function(error) {
    console.log(error);
  });
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。