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

我是JavaScript的初学者，更是ReactJS的初学者。下面的大部分内容我都是从教程中获取的，我正在尝试对其进行修改。因此，代码显示“标记”（人员、地点、地点等）中的所有值。它显示为内联li元素，因为它将成为一个菜单。问题是它显示了所有元素的所有标记。我只想让它捕捉菜单的独特“标签”值（例如，人、地点、事物等）。我尝试了uq.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>
    );
  }
}

从“React”导入React；
从“./GalleryHeader”导入GalleryHeader；
从“/ImageEntry”导入ImageEntry；
从“lodash”进口；
导出默认类GalleryImage扩展React.Component{
renderItems（）{
返回u.map（this.props.images，（image，index）=>）；
}
renderMenu（）{
返回u.map（this.props.images，（image，index）=>）；
}
render（）{
返回(

{this.renderMenu（）}

{this.renderItems（）}
);
}
}

厨房总管

import React from "react";


export default class GalleryHeader extends React.Component {

  render() {

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

从“React”导入React；
导出默认类GalleryHeader扩展React.Component{
render（）{
返回(
{this.props.tag}
);
}
}

图像存储在：

画廊

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

从“React”导入React；
从“./Gallery/GalleryImages”导入GalleryImages；
变量图像=[{
“id”：1，
“标签”：“人”，
“src”：“img/img1.jpg”，
“bsrc”：“img/img1b.jpg”，
“alt”：“一些描述”
}, {
“id”：2，
“标签”：“地点”，
“src”：“img/img2.jpg”，
“bsrc”：“img/img2b.jpg”，
“alt”：“一些描述”
}, {
“id”：3，
“标签”：“地点”，
“src”：“img/img3.jpg”，
“bsrc”：“img/img3b.jpg”，
“alt”：“某地描述”
}, {
“id”：4，
“标记”：“事物”，
“src”：“img/img4.jpg”，
“bsrc”：“img/img4b.jpg”，
“alt”：“物联网”
}, {
“id”：5，
“标签”：“人”，
“src”：“img/img5.jpg”，
“bsrc”：“img/img5b.jpg”，
“alt”：“个人”
}, {
“id”：6，
“标签”：“地点”，
“src”：“img/img6.jpg”，
“bsrc”：“img/img6b.jpg”，
“alt”：“有趣的地方”
}, {
“id”：7，
“标签”：“人”，
“src”：“img/img7.jpg”，
“bsrc”：“img/img7b.jpg”，
“alt”：“塔拉巴奥拉”
}, {
“id”：8，
“标签”：“地点”，
“src”：“img/img6.jpg”，
“bsrc”：“img/img6b.jpg”，
“alt”：“有趣的地方”
}, {
“id”：9，
“标签”：“地点”，
“src”：“img/img6.jpg”，
“bsrc”：“img/img6b.jpg”，
“alt”：“有趣的地方”
}];
导出默认类库扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
图像，
people:\ u0.filter（图像，{tag:“things”}），//或者在ES6中仅限people
资料来源：u.filter（图像，{tag:“src”}），
位置：u.filter（图像，{tag:“places”}），
猫：uq.uniq（图片）
};
}
render（）{
//这就是如何过滤它们的方法
var-ima=551;.filter（图像，{tag:“things”}）；
控制台日志（ima）；
返回(
这是厨房女伯爵
);
}
}

因为它们是纯字符串，所以您可以为此创建一个JavaScript

集

据我所知，您希望通过给定的标记过滤掉原始图像集合。正确吗？

如果是，则创建过滤器函数，该函数接受要过滤的标记和集合。然后可以重用此函数

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

编辑

添加了用于拾取所有唯一标记名的代码。无依赖性。未联机设置，在IE<11中工作

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

它类似于javascript中的SQL SELECT DISTINCT语句

const uniqueTags=[]；
images.map（项=>{
var findItem=uniqueTags.find（x=>x.tag==item.tag）；
如果（！findItem）
唯一标签。推送（项目）；
});
如本文档[1]所述，我们可以使用uniqBy方法返回对象数组中的唯一元素。请参考下面的代码

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

这将返回如下输出[{'id'：100}，{'id'：200}，{'id'：300}]

[1] 
字体脚本集

对于那些正在使用打字机的人，我建议使用打字机

不会工作，因为集合（数组）中的每个对象都是不同的对象（引用不同）。但他只希望每个元素的“标记”值来构建菜单。他可以用每个标记字符串创建一个集合。没有？那么是的。不幸的是，您需要展平数组（在示例中给出），然后从这样的数组创建集合
const tags=new Set（images.map（img=>img.tag））不幸的是，我们需要支持旧IE。如果没有这个，我肯定会按照您的建议使用Set:）谢谢。你抢先回答了我的下一个问题。这正是我想做的，你的答案会派上用场的。目前，我在这之前就被困了一步。尝试生成一个菜单，应该是：地点、人、事物。我上面的代码生成：人、地点、地点、事物、人、地点、人、地点等）编辑我的回复。添加了提取唯一标记名的代码。嗨，Andrey。我想知道你能否再回答一个关于我密码的问题。在renderItems函数中，我是否需要（images，index）中的'index'参数和随后的“key={index}？索引的作用是什么？它似乎没有。从技术上说，您不需要它。另一方面，React要求您在渲染数组if项进行内部优化时提供
键
道具。实际上，最好避免将索引作为
键
传递，而应该传递唯一值。在您的情况下，您可以使用
key={image.id}
，因为它是唯一的。在无法指定唯一值的情况下，请随意使用index（当没有更好的选项时）
\uuu.map（this.props.images，（image）=>）
Array.from(new Set(yourArray.map((item: any) => item.id)))