Javascript 如何使用reactjs从数组中删除重复值？

你好，我是javascript中的beginnger，也是react中的beginnger。有人能帮我解决这个问题吗。我只是在reactjs博客上尝试这个项目，但我只是想用我的方式解决这个问题

todoList.js

const todoList = [
    {category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'},
    {category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'},
    {category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'},
    {category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'},
    {category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'},
    {category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'}
];

export default todoList

FilterTableProctable.js

class FilterableProductTable extends React.Component{
    render(){
        const aw = []
        todoList.forEach(elem=>{
            if(aw.indexOf(elem.category) === -1){
                aw.push(
                    <li key={elem.name}> {elem.category}</li>
                )
            }
        })

        return(
            <div>
                {aw}
            </div>
        )
    }
}

类FilterableProductTable扩展了React.Component{
render（）{
警司=[]
todoList.forEach（元素=>{
如果（要素类别的aw.indexOf）=-1）{
推(
{elem.category}
)
}
})
返回(
{aw}
)
}
}

结果仍然相同，所有重复值仍然显示在我的屏幕上。有人能帮我吗

很抱歉我的英语不好，但谢谢大家

const uniqueTodos = todoList.filter((todo,index) => {
  return index === todoList.findIndex(obj => {
    return JSON.stringify(obj) === JSON.stringify(todo);
  });
});

还要更改您的数据。该数据集中没有唯一性

此外，此代码仅当对象与所有属性相同时才会删除对象。它适合于只考虑一个性质。

const uniqueTodos = todoList.filter((todo,index) => {
      return index === todoList.findIndex(obj => {
        return obj.category === todo.category;
      });
    });

还要更改您的数据。该数据集中没有唯一性

此外，此代码仅当对象与所有属性相同时才会删除对象。它适合于只考虑一个性质。

const uniqueTodos = todoList.filter((todo,index) => {
      return index === todoList.findIndex(obj => {
        return obj.category === todo.category;
      });
    });

---

您的代码会很好，唯一的问题是您的

aw

数组中填充了

li

属性，它们不是包含

元素类别的字符串。也许如果您跟踪不同的数组，您可以检查它的索引。您还可以在
li
属性上使用
innerHTML
或
textContent
。也许考虑这样的事情：

const aw = [];
const categories = [];
todoList.forEach(elem=>{
    if(!~categories.indexOf(elem.category)) { // tilde changes the result of indexOf to a boolean
        aw.push(
            <li key={elem.name}> {elem.category}</li>
        )
        categories.push(elem.category)
    }
})

const aw=[]；
常量类别=[]；
todoList.forEach（元素=>{
如果（！~categories.indexOf（elem.category））{//tilde将indexOf的结果更改为布尔值
推(
{elem.category}
)
类别推送（元素类别）
}
})
您的代码会很好，唯一的问题是您的
aw
数组中填充了
li
属性，它们不是包含
元素类别的字符串。也许如果您跟踪不同的数组，您可以检查它的索引。您还可以在
li
属性上使用
innerHTML
或
textContent
。也许考虑这样的事情：

const aw = [];
const categories = [];
todoList.forEach(elem=>{
    if(!~categories.indexOf(elem.category)) { // tilde changes the result of indexOf to a boolean
        aw.push(
            <li key={elem.name}> {elem.category}</li>
        )
        categories.push(elem.category)
    }
})

const aw=[]；
常量类别=[]；
todoList.forEach（元素=>{
如果（！~categories.indexOf（elem.category））{//tilde将indexOf的结果更改为布尔值
推(
{elem.category}
)
类别推送（元素类别）
}
})
但某些类别的项目是否不同？它们怎么会是重复的呢？但是有些类别没有不同的项目吗？它们怎么会是复制品？