功能后将对象存储在状态

时间:2019-02-20 16:07:57

标签: javascript reactjs state

我对我的语言不好先表示歉意。阅读问题将花费您不到30秒的时间。

我有以下代码:


    constructor(props) {
        super(props);
        this.state = {
            report: [],
            reports: [],
            donaters: [],
            donate_report: [],
            donaters_count: [],
            donaters_recurrent_count: [],
            dates: [],
            menu: [
                {
                    key: 2018,
                    title: "2019",
                    opened: true,
                    info: [
                        {
                            key: 11,
                            title: 'dec',
                            opened: false,
                            content: []
                        }, {
                            key: 10,
                            title: 'nov',
                            opened: false,
                            content: []
                        }, {
                            key: 9,
                            title: 'oct',
                            opened: false,
                            content: []
                        }]
                },
                {
                    key: 2019,
                    title: "2018",
                    opened: false,
                    info: [
                        {
                            key: 1,
                            title: 'jan',
                            opened: false,
                            content: []
                        }]
                }],
            active_menu: 2018,
            active_month: [],
            active_info: [],
        }
    }

    componentDidMount(value) {
        const {active_menu} = this.state;
        fetch(`${api.root}/donate_report?year=${active_menu}`, {param: value})
            .then((response) => response.json())
            .then((donate_report) => {
                this.setState({
                    report: donate_report.report[0].reports,
                    donaters: donate_report.report[0].donaters,
                    active_info: active_menu.info
                })
            })
    }


    toggleInfo(index) {
        const info = this.state.active_info.slice();
        info[index].opened = !info[index].opened;
        this.setState({
            active_info: info,
            active_month: info[index].key,
            dates: this.state.donaters[info[index].key][info[index].key + 1][0]
        })
    }

    toggleMenu(menu, value) {
        if (this.state.active_menu !== menu) {
            this.setState({active_menu: menu, mobile_menu_opened: false, menu_changed: true});
        fetch(`${api.root}/donate_report?year=${this.state.active_menu}`, {param: value})
                .then((response) => response.json())
                .then((donate_report) => {
                    this.setState({
                        report: donate_report.report[0].reports,
                        donaters: donate_report.report[0].donaters,
                        dates: donate_report.report[0].donaters[this.state.active_month][this.state.active_month + 1][0],
                        active_info: this.state.menu.info
                    });
                    console.log('update');
                });
        }
    }

请告诉我,如果info等于menu,如何将active_month中的menu.key存储到active_menu

我通过功能active_menu将所选菜单分配到状态toggleMenu()没问题:

if (this.state.active_menu !== menu) {
            this.setState({active_menu: menu})
}

对不起,如果我写的不正确,我会尝试写详细信息:

如果用户选择2019年,则active_menumenu获取密钥(对于2019年,则为2019 :))在active_month中,获取整个info,在我们的情况下将是

{
key: 1,
title: 'jan',
opened: false,
content: []
}

感谢您的任何回答和建议!

1 个答案:

答案 0 :(得分:1)

您需要按键查找菜单项。您可以执行以下操作:

maxlen

然后您可以轻松使用它 function getMenuInfoByKey (state, key) { let menuObj = state.menu.find(menuItem => menuItem.key === key); return menuObj && menuObj.info || null; }