Question

我需要从其他字段中检索所有信息，而不仅仅是json中的“ Padre”和“ Hijo”。我也想从“ Id”或“ url”等字段中获取信息。我想我无法将它们退还给componentWillMount中的简化功能，如果需要“ Padre”和“ Hijo”怎么办？

这是我的json的示例。

{
  "Id": "114",
  "Description": "SALUD NORMAL",
  "Padre": "CRM",
  "Hijo": "Argumentarios",
  "URL": "www.test.com",
  "Closable": "1",
  "Autoload": "0",
  "Visible": "1"
 }

Nav将是父元素，并对其子菜单Menu满意。菜单是为json的每个“ Padre”（this.props.menu）和“ Hijo”（this.props.submenu）创建按钮的菜单。

这是我的代码。

class Nav extends Component{
    constructor(props){
        super(props)
        this.state = {
            menuSubmenu:[],
            abrirSubmenu: false,
        }
        this.submenuClick = this.submenuClick.bind(this);
    }
    submenuClick() {
        this.setState(state => ({
            abrirSubmenu: !state.abrirSubmenu
          }));
        //alert('Click!')
    }
    componentWillMount(){
        fetch('fake.php')
        .then(response => response.json())
        .then(menuSubmenu =>{

            const PadreMap = menuSubmenu.reduce((acc, obj) => {
                if (!acc[obj.Padre]) {
                  acc[obj.Padre] = {
                    ...obj,
                    Hijo: [obj.Hijo],
                    Description: [obj.Description]
                  };
                } else {
                  !acc[obj.Padre].Hijo.includes(obj.Hijo) && acc[obj.Padre].Hijo.push(obj.Hijo);
                  //!acc[obj.Padre].Hijo.includes(obj.Hijo) && acc[obj.Padre].Hijo.push(obj.Description)
                }
                return acc;
              }, {});

                this.setState({
                        menuSubmenu: Object.keys(PadreMap).map((padre) => ({
                        menu: padre,
                        submenu: PadreMap[padre].Hijo,
                        id: PadreMap.Id,
                        descripcion: PadreMap[padre].Description,
                        url: PadreMap[padre].URL
                }))

            })
            console.log(PadreMap);
        })
    }

    render() {
        if (this.state.menuSubmenu.length > 0) {
          return(
            <nav className="nav">
                <div className="menu">
                    <ul className="list">
                        {this.state.menuSubmenu.map(datos => <Menu key={datos.id} menu={datos.menu} submenu={datos.submenu} descripcion={datos.descripcion} submenuClick={this.submenuClick} abrirSubmenu={this.state.abrirSubmenu}/>)}
                    </ul>
                    <div className="content-bnt">
                        <button id="desplegar" className='btn btn--rounded'>
                            <Icon icon="flecha" className='ico-flecha'/>
                        </button>
                    </div>  
                </div>
            </nav>
          );
        }
        return (<p>Cargando usuarios...</p>);
    }
}

class Menu extends Component{
    render(){
        return (
            <li key={this.props.id} className="list__item">
                <button title={this.props.menu} id={"mn-" + this.props.menu} className="desplegable" onClick={this.props.submenuClick}><Icon icon="auriculares" className='ico-auriculares'/>{this.props.menu}</button>
            {
            this.props.abrirSubmenu
                ? (
                <div id="sb-crm" className="submenu">
                    {this.props.submenu.map(hijo => <h3 className="nav--title"><Icon icon="descargar" className='ico-descargar'/>{hijo}</h3>)}
                    <ul className="list">
                        <li className="list__item">
                            {this.props.descripcion.map(tercerNivel => <a href={this.props.url} title={this.props.descripcion}>{tercerNivel}</a>)}
                        </li>
                    </ul>
                </div>
                )
                : (
                null
                )
            }
            </li>
        )
    }
}

export default Nav;

我需要能够使用json的所有信息，而不仅仅是“ Padre”和“ Hijo”。我还需要将信息按他的“ Padre”分组

Answer 1

此代码段应该合适：

this.setState(
  {
    menuSubmenu: Object.keys(PadreMap).map((padre) => {
      const {Padre, Hijo, ...rest} = PadreMap[padre];
      return {
        menu: padre,
        submenu: Hijo,
        ...rest
      }
    })
  }
)

我无法显示json的元素-React

1 个答案: