отреагировать на создание настроек - PullRequest
Новая
       9

отреагировать на создание настроек

0 голосов
/ 05 мая 2018

У меня есть боковая панель навигации, которая получает список JSON 

import {
  AppSidebarNav,
} from '@coreui/react';
<AppSidebarNav  navConfig={navigation} {...this.props} />

и данные списка товаров 

export default {
    items: [
      {
        name: 'Dashboard',
        url: '/dashboard',
        icon: 'icon-speedometer',
      },
      {
        name: 'Profile',
        url: '/profile',
        icon: 'icon-speedometer',
      },...
  ],
  };

как настроить список элементов перед их загрузкой на боковую панель? есть ли способ использовать componentDidMount() обновить список? как мне решить эту задачу

Ответы [ 2 ]

0 голосов
/ 14 июля 2019

Вы можете использовать этот пример кода для извлечения динамических данных по async , await и axios в AppSidebarNav core-ui 

import React, {Component, Suspense} from "react";
import {
    AppSidebarNav,
    AppSidebar,
    AppSidebarFooter,
    AppSidebarForm,
    AppSidebarHeader,
    AppSidebarMinimizer,
} from "@coreui/react";
import axios from "axios";
import navigation from "../../_nav";

class SidebarNav extends Component {

    constructor(props) {
        super(props);
        this.state = {
            navData: null,
        };
    }

    async getData() {
        let res = await axios.get('REQUEST_URL');
        this.setState({ navData: {items : res });
        // OR // return await {items : res};
    };

    componentDidMount() {
        if (!this.state.navData) {
            (async () => {
                try {                 
                    await this.getData();
                    // OR // this.setState({navData: await this.getData()});
                } catch (e) {
                    //...handle the error...
                    console.log(e);
                }
            })();
        }
    }


    render() {
        return (
        <AppSidebar fixed display="lg">
            <AppSidebarHeader />
            <AppSidebarForm />
            <Suspense>
                <AppSidebarNav navConfig={(this.state.navData === null) ? navigation : this.state.navData} {...this.props} />
            </Suspense>
            <AppSidebarFooter />
            <AppSidebarMinimizer />
        </AppSidebar>
        )
    }
}

export default SidebarNav;
}

navigation переменная может использоваться для данных по умолчанию или загрузки ... 

export default {
    items: [
        {
            name: 'Loading... ',
            url: '/'
        }
    ]
}

В последней части вызова SidebarNav Компонент в DefaultLayout или где угодно.

0 голосов
/ 27 мая 2018

Поместите список элементов в свой собственный файл, скажем, nav.js. Затем добавьте эту строку в ваш импорт 

    import navigation from "./nav"; // or whatever relative path nav.js is in.
...