如果在 React/ES6 中相同，则仅显示单个项目答案

【问题标题】：Show Only Single Item If Same in React/ES6如果在 React/ES6 中相同，则仅显示单个项目
【发布时间】：2021-03-03 17:13:17
【问题描述】：

我只想显示一个项目，如果它具有相同的 contact_id 和 id。

预期输出为Name: Robert Williams, Name: John Jones

{
  "id": "8888",
  "contact_id": "3424",
  "contact_name": "Robert Williams",
},
{
  "id": "9999",
  "contact_id": "4343",
  "contact_name": "John Jones",
},
{
  "id": "8888",
  "contact_id": "3424",
  "contact_name": "Robert Williams",
}

代码

{
  data.map((item, index) => {
    return (
      <div key={index}>
        <h1>Name</h1>
        <p>
          {item.contact_name}
        </p>
      </div>
    );
  });
}

【问题讨论】：

stackoverflow.com/questions/31740155/… ，这能解决你的问题吗？

标签： javascript reactjs ecmascript-6

【解决方案1】：

一个班轮 ES6 可以创造奇迹：

const arr = [{
  "id": "8888",
  "contact_id": "3424",
  "contact_name": "Robert Williams",
},
{
  "id": "9999",
  "contact_id": "4343",
  "contact_name": "John Jones",
},
{
  "id": "8888",
  "contact_id": "3424",
  "contact_name": "Robert Williams",
}]

   const data = arr.filter((v,i,a)=>a.findIndex(t=>(t.id === v.id && t.contact_id===v.contact_id))===i)

然后

{
  data.map((item, index) => {
    return (
      <div key={index}>
        <h1>Name</h1>
        <p>
          {item.contact_name}
        </p>
      </div>
    );
  });
}

【讨论】：

【解决方案2】：

你可以使用Array.prototype.reduce():

  const dataTransformed = data.reduce((arr, curr) => {
    return arr.find(
      item => item.id === curr.id && item.contact_id === curr.contact_id
    )
      ? [...arr]
      : [...arr, curr];
  }, []);

然后遍历转换后的数组

【讨论】：

【解决方案3】：

这样的？

let data = [{
        "id": "8888",
        "contact_id": "3424",
        "contact_name": "Robert Williams",
    },
    {
        "id": "9999",
        "contact_id": "4343",
        "contact_name": "John Jones",
    },
    {
        "id": "8888",
        "contact_id": "3424",
        "contact_name": "Robert Williams",
    }
];

let transform = (data) => {

    let existing = {};
    let result = [];

    data.forEach(x => {

        if (!existing[x.id] || !existing[x.id][x.contact_id]) {
            existing[x.id] = {
                [x.contact_id]: true
            };
            result.push(x);


        }

    });

    return result;

}

console.log(transform(data));

现在您可以渲染上述函数返回的结果了。

【讨论】：

【解决方案4】：

创建对象和过滤函数：

const memo = {};

const filter = (item) => {
  if(!memo[item.id]){
     return true;
  }else {
    memo[item.id] = item.id;
    return false;
  }
}

然后在你的渲染中：

{
  data.filter(filter).map((item, index) => {
      return (
         <div key={index}>
           <h1>Name</h1>
           <p>
             {item.contact_name}
           </p>
         </div>); 
  });
}

【讨论】：

【解决方案5】：

这里有一个解决方案：

 {
  data.map((item, index) => {
    if(item.contact_name === item.contact_id) {
       return (
          <div key={index}>
           <h1>Name</h1>
          <p>
            {item.contact_name}
          </p>
        </div>
      );

    }  else {
        return null;
 }
    
  });
}

【讨论】：