从对象数组的内部数组中删除重复项

Question

这是我的数组。如何删除此类结构中的重复项？当我映射 arr 时，我得到嵌套在每个对象中的每个数组的值。我想过滤重复的值。当前输出：再见你好你好预期的输出应该是：bye hello

[

    {
        arr: ['']
        val: "string"
    }
    {
        arr: ['bye', 'hello']
        val: "string"
    }
    {
        arr: ['hello']
        val: "string"
    }

]
    
    
myArray.map(item => item.arr.map((el, index) =>
    <p key={index}>{el}</p>       
))

Answer 1

希望对您有所帮助：

const filteredArray = useMemo(() => {
   const used = []
   
   return myArray.map(sub => {
      return { ...sub, arr:sub.arr.map(el 
    => {
      if(used.includes(el) return null
      used.push(el)
      return el
    }}
   })
}, deps)

然后在 JSX 中：

filteredArray.map(() => ...)

Answer 2

您可以简单地管理一个数组来过滤您想要显示的内容：

import React from 'react';
import { render } from 'react-dom';
import './style.css';

const App = () => {
  const data = [
    {
      arr: [''],
      val: 'string',
    },
    {
      arr: ['bye', 'hello'],
      val: 'string',
    },
    {
      arr: ['hello'],
      val: 'string',
    },
  ];

  const buildData = () => {
    const passedValues = [];
    return data.map((item) => {
      return item.arr.map((el) => {
        if (!passedValues.includes(el)) {
          passedValues.push(el);
          return <div>{el}</div>;
        }
      });
    });
  };

  return <div>{buildData()}</div>;
};

render(<App />, document.getElementById('root'));

这里是the repro on StackBlitz.

Answer 3

所有这些答案都很好...我认为 @vitaliyirtlach 是最好的，因为它最接近 React。

我只是把它放在那里，你也可以循环 myArray，用 Set 删除重复项，然后将它们放在一个你可以循环的数组中：

    const myArray = [
    
        {
            arr: [''],
            val: "string"
        },
        {
            arr: ['bye', 'hello'],
            val: "string"
        },
        {
            arr: ['hello'],
            val: "string"
        }
    
    ]
    
    const removeDupes = () => {
      const newArr = []
      myArray.map(item => item.arr.map((el, index) =>
        newArr.push(el)     
      ))
      return [...new Set(newArr)]
    }
    
    const loopArray = removeDupes();
    
    console.log(loopArray)// logs ["","bye","hello"]

    loopArray.map((el, index) =>
      <p key={index}>{el}</p>
    ))

从对象数组的内部数组中删除重复项

Remove duplicates from inner array of array of objects

javascript

arrays

sorting

duplicates

reactjs