json - 如何在 React 中从我的 json 中删除重复值

问题描述

我正在使用 React 开发应用程序，但遇到了问题。我从 json 中提取了一个值，并且重复了这些值。我只希望每个值出现一次。

我希望它只返回一次“Padre”的每个元素：“CRM”、“Permisos”和“Telefonia”。“Hijo”也是如此。

我尝试将“.concat”更改为“.reduce”，因为我读过它可以像这样完成，但它不起作用。我看过一些例子，但没有一个适用于“this.state”，所以我不知道该怎么做。

你能帮我用正确的方法吗？

这是我的 json 文件的一部分

[
   {
      "Id":"114",
      "Padre":"CRM",
      "Hijo":"Argumentarios"
   },
   {
      "Id":"115",
      "Padre":"CRM",
      "Hijo":"Argumentarios"
   },
   {
      "Id":"116",
      "Padre":"CRM",
      "Hijo":"Argumentarios"
   },
   {
      "Id":"44",
      "Padre":"Permisos",
      "Hijo":"root"
   },
   {
      "Id":"45",
      "Padre":"Permisos",
      "Hijo":"root"
   },
   {
      "Id":"46",
      "Padre":"Permisos",
      "Hijo":"root"
   },
   {
      "Id":"47",
      "Padre":"Permisos",
      "Hijo":"root"
   },
   {
      "Id":"50",
      "Padre":"Telefonia",
      "Hijo":"Audio"
   },
   {
      "Id":"51",
      "Padre":"Telefonia",
      "Hijo":"Audio"
   },
   {
      "Id":"52",
      "Padre":"Telefonia",
      "Hijo":"Configuracion"
   },
   {
      "Id":"70",
      "Padre":"Telefonia",
      "Hijo":"Rutas"
   }
]

出于保密原因，我无法显示实际文件。在我的下一个代码中，我更改了假 json url 的获取

我用@Avanthika 和@blaz 代码编辑我的代码。目前该代码有效，但仅显示它找到的“父亲”和“儿子”的第一个值。我只需要显示一次“父亲”和“儿子”的不同值。示例结果：父亲：CRM PERMISOS 儿子：ARGUMENTARIOS ROOT

目前，我只看到我的新代码：CRM (Padre) 和 Argumentarios (Son)。其余元素未显示。

import React, { Component } from 'react';

class Nav extends Component{
    constructor(props){
        super(props)
        this.state = {
            menuSubmenu:[]
        }
    }

    componentWillMount(){
        fetch('http://FAKE.php')
        .then(response => response.json())
        .then(menuSubmenu =>{

            menuSubmenu.forEach(datos => {
                let data = {
                    menu:datos.Padre,
                    submenu:datos.Hijo,
                    id:datos.Id
                }

                //console.log( data )
                //console.log (data.menu);
                this.setState({ 
                    menuSubmenu:this.state.menuSubmenu.concat([data])
                }) 
            })
        })
    }
    render() {
        const array = [...this.state.menuSubmenu];
        const distinctValues = array.filter(
            ({ Padre, Hijo }, index) => {
              return array.findIndex(item => item.Padre === Padre && item.Hijo === Hijo) === index;
          });
          //console.log(this.state.menuSubmenu);
          //console.log(distinctValues);

        if (distinctValues.length > 0) {
          return(
            <div>
              {distinctValues.map(datos => <Navegacion key={datos.id} menu={datos.menu} submenu={datos.submenu} />)}
            </div>
          );
        }
        return (<p>Cargando usuarios...</p>);
      }
}

class Navegacion extends Component{
    render(){
        return (
                     <ul className="list">
                        <li className="list__item">{this.props.menu}
                            <ul className="list">
                                <li className="list__item">
                                    <a href="#">{this.props.submenu}</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
        )
    }
}

export default Nav;

这张图片是我的 json 的结果。我的 json 结果

我希望你能帮助我使用“减少”功能。非常感谢！

标签： jsonreactjsreduce

解决方案

您可以使用 new Set 来使 Padre 和 Hijo 的数组列表独一无二。

const array = [{"Id":"114","Padre":"CRM","Hijo":"Argumentarios"},
{"Id":"115","Padre":"CRM","Hijo":"Argumentarios"},
{"Id":"116","Padre":"CRM","Hijo":"Argumentarios"},
{"Id":"44","Padre":"Permisos","Hijo":"root"},
{"Id":"45","Padre":"Permisos","Hijo":"root"},
{"Id":"46","Padre":"Permisos","Hijo":"root"},
{"Id":"47","Padre":"Permisos","Hijo":"root"},
{"Id":"50","Padre":"Telefonia","Hijo":"Audio"},
{"Id":"51","Padre":"Telefonia","Hijo":"Audio"},
{"Id":"52","Padre":"Telefonia","Hijo":"Configuracion"},
{"Id":"70","Padre":"Telefonia","Hijo":"Rutas"}];

const distinctValues = Array.from(new Set(array.map(elem => `${elem.Padre}-${elem.Hijo}`))).map(distinctVal => {
  const [ Padre, Hijo ] = distinctVal.split("-");
  return ({
    Id: array.find(elem => elem.Padre === Padre && elem.Hijo === Hijo).Id,
    Padre,
    Hijo
  });
});
console.log(distinctValues);

或者您可以使用前面提到的 lodash 来提取 uniq 值。您必须使用 uniqBy。

const array = [{"Id":"114","Padre":"CRM","Hijo":"Argumentarios"},
    {"Id":"115","Padre":"CRM","Hijo":"Argumentarios"},
    {"Id":"116","Padre":"CRM","Hijo":"Argumentarios"},
    {"Id":"44","Padre":"Permisos","Hijo":"root"},
    {"Id":"45","Padre":"Permisos","Hijo":"root"},
    {"Id":"46","Padre":"Permisos","Hijo":"root"},
    {"Id":"47","Padre":"Permisos","Hijo":"root"},
    {"Id":"50","Padre":"Telefonia","Hijo":"Audio"},
    {"Id":"51","Padre":"Telefonia","Hijo":"Audio"},
   {"Id":"52","Padre":"Telefonia","Hijo":"Configuracion"},
    {"Id":"70","Padre":"Telefonia","Hijo":"Rutas"}];

const distintValues = _.uniqBy(array, elem => [elem.Padre, elem.Padre].join());

console.log(distintValues);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

您需要以这种方式修复解决方案：

render() {
  const array = [...this.state.menuSubmenu];
  // Put the solution you like here.
  // const distinctValues = the solution you like
  if (distinctValues.length > 0) {
    return(
      <div>
        {distinctValues.map(datos => <Navegacion key={datos.id} menu={datos.menu} submenu={datos.submenu} />)}
      </div>
    );
  }
  return (<p>Cargando usuarios...</p>);
}

json - 如何在 React 中从我的 json 中删除重复值

问题描述

解决方案

推荐阅读