在React / js中从数组中查找唯一值

时间：2016-03-13 21:36:12

标签： javascript reactjs uniq

我是JavaScript的初学者，在ReactJS中是一个更大的初学者。以下大部分内容都是从教程中提取的，并且正在尝试对其进行调整。因此代码显示“标签”中的所有值（人物，地点，地点等）。它将它显示为内联li元素，因为它将成为一个菜单。问题是它显示了所有元素的所有标记。我只是希望它能够捕获菜单的唯一“标记”值（例如，人物，地点，事物......）。我试过_.uniq但它没有显示数组。谢谢。

import React from "react";
import GalleryHeader from './GalleryHeader';
import ImageEntry from './ImageEntry';
import _ from 'lodash';

export default class GalleryImages extends React.Component {

    renderItems() {
        return _.map(this.props.images, (image, index) => <ImageEntry key={index} {...image} />);
    }

  renderMenu() {
    return _.map(this.props.images, (image, index) => <GalleryHeader key={index} {...image} />);
  }


  render() {

    return (
      <div>
      <ul class="list-inline">
        {this.renderMenu()}
      </ul>
        {this.renderItems()}          
      </div>
    );
  }
}

GalleryHeader 

import React from "react";


export default class GalleryHeader extends React.Component {

  render() {

    return (
            <li>{this.props.tag}</li>
    );
  }
}

图像存储在：

廊

import React from "react";

import GalleryImages from './Gallery/GalleryImages';


var images = [{
  "id": 1,
  "tag": "people",
  "src": "img/img1.jpg",
  "bsrc": "img/img1b.jpg",
  "alt": "Some description"
}, {
  "id": 2,
  "tag": "places",
  "src": "img/img2.jpg",
  "bsrc": "img/img2b.jpg",
  "alt": "Some description"
}, {
  "id": 3,
  "tag": "places",
  "src": "img/img3.jpg",
  "bsrc": "img/img3b.jpg",
  "alt": "Some place description"
}, {
  "id": 4,
  "tag": "things",
  "src": "img/img4.jpg",
  "bsrc": "img/img4b.jpg",
  "alt": "Internet of things"
}, {
  "id": 5,
  "tag": "people",
  "src": "img/img5.jpg",
  "bsrc": "img/img5b.jpg",
  "alt": "A personal person"
}, {
  "id": 6,
  "tag": "places",
  "src": "img/img6.jpg",
  "bsrc": "img/img6b.jpg",
  "alt": "Interesting place"
}, {
  "id": 7,
  "tag": "people",
  "src": "img/img7.jpg",
  "bsrc": "img/img7b.jpg",
  "alt": "Tarabaora"
}, {
  "id": 8,
  "tag": "places",
  "src": "img/img6.jpg",
  "bsrc": "img/img6b.jpg",
  "alt": "Interesting place"
}, {
  "id": 9,
  "tag": "places",
  "src": "img/img6.jpg",
  "bsrc": "img/img6b.jpg",
  "alt": "Interesting place"
}];

export default class Gallery extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      images,
      people: _.filter(images, {tag: "things"}),    // or in ES6 just people
      sources: _.filter(images, {tag: "src"}),
      places: _.filter(images, {tag: "places"}),
      cats: _.uniq(images)
    };
  }

  render() {
    // This is how you can filter them
    var ima = _.filter(images, {tag: "things"});
    console.log(ima);


    return (
      <div className="koko">
        <h1>This isGalleryfemCount</h1>
        <GalleryImages images={this.state.images} />
      </div>
    );
  }
}

5 个答案:

答案 0 :(得分：6)

据我了解，您希望按给定标记过滤掉原始图像集。正确吗？
如果是，请创建过滤器函数，该函数接受标记和集合以进行过滤。然后，您可以重用此功能。 

var images = [{
  "id": 1,
  "tag": "people",
  "src": "img/img1.jpg",
  "bsrc": "img/img1b.jpg",
  "alt": "Some description"
}, {
  "id": 2,
  "tag": "places",
  "src": "img/img2.jpg",
  "bsrc": "img/img2b.jpg",
  "alt": "Some description"
}, {
  "id": 3,
  "tag": "places",
  "src": "img/img3.jpg",
  "bsrc": "img/img3b.jpg",
  "alt": "Some place description"
}, {
  "id": 4,
  "tag": "things",
  "src": "img/img4.jpg",
  "bsrc": "img/img4b.jpg",
  "alt": "Internet of things"
}, {
  "id": 5,
  "tag": "people",
  "src": "img/img5.jpg",
  "bsrc": "img/img5b.jpg",
  "alt": "A personal person"
}, {
  "id": 6,
  "tag": "places",
  "src": "img/img6.jpg",
  "bsrc": "img/img6b.jpg",
  "alt": "Interesting place"
}, {
  "id": 7,
  "tag": "people",
  "src": "img/img7.jpg",
  "bsrc": "img/img7b.jpg",
  "alt": "Tarabaora"
}, {
  "id": 8,
  "tag": "places",
  "src": "img/img6.jpg",
  "bsrc": "img/img6b.jpg",
  "alt": "Interesting place"
}, {
  "id": 9,
  "tag": "places",
  "src": "img/img6.jpg",
  "bsrc": "img/img6b.jpg",
  "alt": "Interesting place"
}];

const filter = (tag, arr) => arr.filter(img => img.tag === tag);

// or in ES5
// var filter = function(tag, arr) {
//    return arr.filter(function(img) {
//        return img.tag === tag;
//    })
// };

const filtered = filter('people', images);

修改
添加了选择所有唯一标记名称的代码。依赖免费。 Unline Set，这适用于IE＆lt; 11。

const uniqueTags = [];
images.map(img => {
    if (uniqueTags.indexOf(img.tag) === -1) {
        uniqueTags.push(img.tag)
    }
});

答案 1 :(得分：1)

类似于javascript中的SQL SELECT DISTINCT语句

      const uniqueTags = [];
                images.map(item => {                  
                    var findItem = uniqueTags.find(x => x.tag === item.tag);
                    if (!findItem)
                        uniqueTags.push(item);
                });

答案 2 :(得分：0)

由于它们是纯字符串，因此您可以为其创建JavaScript Resolving dependencies... Dependencies resolved in 1202ms. Running script /Users/shamoon/.sdkman/candidates/grails/current/scripts/InstallPlugin.groovy Environment set to development Resolving plugin compass-sass. Please wait... :: problems summary :: :::: WARNINGS module not found: org.grails.plugins#compass-sass;latest.integration ==== grailsPlugins: tried -- artifact org.grails.plugins#compass-sass;latest.integration!compass-sass.zip: /Users/shamoon/GoogleDrive/Sites/IQ4/IQ4/IQ4Server/lib/compass-sass-[revision].zip /Users/shamoon/.grails/1.3.7/projects/IQ4Server/plugins/asynchronous-mail-0.2.1-SNAPSHOT/lib/compass-sass-[revision].zip /Users/shamoon/.grails/1.3.7/projects/IQ4Server/plugins/burning-image-0.5.0/lib/compass-sass-[revision].zip /Users/shamoon/.grails/1.3.7/projects/IQ4Server/plugins/cache-headers-1.1.5/lib/compass-sass-[revision].zip /Users/shamoon/.grails/1.3.7/projects/IQ4Server/plugins/cached-resources-1.0/lib/compass-sass-[revision].zip /Users/shamoon/.grails/1.3.7/projects/IQ4Server/plugins/database-migration-0.2.1/lib/compass-sass-[revision].zip /Users/shamoon/.grails/1.3.7/projects/IQ4Server/plugins/hibernate-1.3.7/lib/compass-sass-[revision].zip /Users/shamoon/.grails/1.3.7/projects/IQ4Server/plugins/jamon-0.1/lib/compass-sass-[revision].zip /Users/shamoon/.grails/1.3.7/projects/IQ4Server/plugins/jaxrs-0.5/lib/compass-sass-[revision].zip /Users/shamoon/.grails/1.3.7/projects/IQ4Server/plugins/mail-1.0/lib/compass-sass-[revision].zip /Users/shamoon/.grails/1.3.7/projects/IQ4Server/plugins/oauth-0.10/lib/compass-sass-[revision].zip /Users/shamoon/.grails/1.3.7/projects/IQ4Server/plugins/quartz-0.4.2/lib/compass-sass-[revision].zip /Users/shamoon/.grails/1.3.7/projects/IQ4Server/plugins/resources-1.1.6/lib/compass-sass-[revision].zip /Users/shamoon/.grails/1.3.7/projects/IQ4Server/plugins/sanitizer-0.6.2/lib/compass-sass-[revision].zip /Users/shamoon/.grails/1.3.7/projects/IQ4Server/plugins/solr-0.3c/lib/compass-sass-[revision].zip /Users/shamoon/.grails/1.3.7/projects/IQ4Server/plugins/spring-security-core-1.2.6/lib/compass-sass-[revision].zip /Users/shamoon/.grails/1.3.7/projects/IQ4Server/plugins/taggable-1.0.1/lib/compass-sass-[revision].zip /Users/shamoon/.grails/1.3.7/projects/IQ4Server/plugins/tomcat-1.3.7/lib/compass-sass-[revision].zip /Users/shamoon/.grails/1.3.7/projects/IQ4Server/plugins/webxml-1.4.1/lib/compass-sass-[revision].zip /Users/shamoon/.grails/1.3.7/projects/IQ4Server/plugins/zipped-resources-1.0/lib/compass-sass-[revision].zip ==== grailsHome: tried /Users/shamoon/.sdkman/candidates/grails/current/lib/compass-sass-[revision].xml -- artifact org.grails.plugins#compass-sass;latest.integration!compass-sass.zip: /Users/shamoon/.sdkman/candidates/grails/current/lib/compass-sass-[revision].zip ==== grailsHome: tried /Users/shamoon/.sdkman/candidates/grails/current/dist/compass-sass-[revision].xml -- artifact org.grails.plugins#compass-sass;latest.integration!compass-sass.zip: /Users/shamoon/.sdkman/candidates/grails/current/dist/compass-sass-[revision].zip ==== grailsHome: tried -- artifact org.grails.plugins#compass-sass;latest.integration!compass-sass.zip: /Users/shamoon/.sdkman/candidates/grails/current/plugins/grails-compass-sass-[revision].zip ==== grailsCentral: tried -- artifact org.grails.plugins#compass-sass;latest.integration!compass-sass.zip: http://svn.codehaus.org/grails-plugins/grails-compass-sass/tags/LATEST_RELEASE/grails-compass-sass-[revision].zip ==== grailsCore: tried -- artifact org.grails.plugins#compass-sass;latest.integration!compass-sass.zip: http://svn.codehaus.org/grails/trunk/grails-plugins/grails-compass-sass/tags/LATEST_RELEASE/grails-compass-sass-[revision].zip ==== mavenCentral: tried http://repo1.maven.org/maven2/org/grails/plugins/compass-sass/[revision]/compass-sass-[revision].pom -- artifact org.grails.plugins#compass-sass;latest.integration!compass-sass.zip: http://repo1.maven.org/maven2/org/grails/plugins/compass-sass/[revision]/compass-sass-[revision].zip ==== http://oauth.googlecode.com/svn/code/maven: tried http://oauth.googlecode.com/svn/code/maven/org/grails/plugins/compass-sass/[revision]/compass-sass-[revision].pom -- artifact org.grails.plugins#compass-sass;latest.integration!compass-sass.zip: http://oauth.googlecode.com/svn/code/maven/org/grails/plugins/compass-sass/[revision]/compass-sass-[revision].zip ==== http://download.java.net/maven/2/: tried http://download.java.net/maven/2/org/grails/plugins/compass-sass/[revision]/compass-sass-[revision].pom -- artifact org.grails.plugins#compass-sass;latest.integration!compass-sass.zip: http://download.java.net/maven/2/org/grails/plugins/compass-sass/[revision]/compass-sass-[revision].zip ==== localMavenResolver: tried /Users/shamoon/.m2/repository/org/grails/plugins/compass-sass/[revision]/compass-sass-[revision].pom -- artifact org.grails.plugins#compass-sass;latest.integration!compass-sass.zip: /Users/shamoon/.m2/repository/org/grails/plugins/compass-sass/[revision]/compass-sass-[revision].zip ==== https://repository.sonatype.org/content/repositories/central: tried https://repository.sonatype.org/content/repositories/central/org/grails/plugins/compass-sass/[revision]/compass-sass-[revision].pom -- artifact org.grails.plugins#compass-sass;latest.integration!compass-sass.zip: https://repository.sonatype.org/content/repositories/central/org/grails/plugins/compass-sass/[revision]/compass-sass-[revision].zip :::::::::::::::::::::::::::::::::::::::::::::: :: UNRESOLVED DEPENDENCIES :: :::::::::::::::::::::::::::::::::::::::::::::: :: org.grails.plugins#compass-sass;latest.integration: not found :::::::::::::::::::::::::::::::::::::::::::::: Error resolving plugin [name:compass-sass, group:org.grails.plugins, version:latest.integration]. Plugin not found for name [compass-sass] and version [not specified] 。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set

答案 3 :(得分：0)

如本文档中所述[1]，我们可以使用 uniqBy 方法返回对象数组中的唯一元素。请参考以下代码。

import _ from 'lodash';
_.uniqBy([{ 'id': 100 }, { 'id': 200 }, { 'id': 300 },{ 'id': 100 }], 'id');

这将返回这样的输出 [{ 'id': 100 }, { 'id': 200 }, { 'id': 300 }]

[1] https://lodash.com/docs/#uniqBy

答案 4 :(得分：0)

打字稿集 source

对于那些使用 Typescripts 的人，我会推荐 TypeScript Set

Array.from(new Set(yourArray.map((item: any) => item.id)))
相关问题
最新问题