如何在ReactJS中使用lodash获取不同的值?

时间:2017-11-01 17:58:54

标签: reactjs lodash

如何在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 Part:

  <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>

1 个答案:

答案 0 :(得分:1)

根据documentation

,您可以使用_.uniqBy
  

这个方法就像_.uniq,只不过它接受的是iteratee   为数组中的每个元素调用以生成标准   计算唯一性。结果值的顺序由下式确定   它们在数组中出现的顺序。迭代器用一个调用   参数:(值)。

我添加了一个例子:

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

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

console.log(locationsUnique);
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
&#13;
&#13;
&#13;

更新:

根据评论中分享的方法,我猜测你想要做的是:

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);
  });
}