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

Question

这是我的数组。 如何删除此类结构中的重复项？ 当我 map over arr 我得到嵌套在每个 object 中的每个数组的值。我想过滤重复的值。 当前output：bye hello hello 预期的output应该是：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'));

这是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>
    ))