javascript - 在函数之后将对象存储在状态中

Question

我为我的粗言秽语提前道歉。阅读问题不会超过 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');
                });
        }
    }

请告诉我，如果 menu.key，我如何在 active_month 中存储 menu 中的 info等于active_menu

使用我的函数 toggleMenu() 将所选菜单分配给状态 active_menu 没有问题:

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

对不起，如果我写的不准确，我会尽量写的详细一点:

如果用户选择 2019 年，active_menu 从 menu 中获取 key (对于 2019 年，它是 2019 :))并且在active_month，获取整个 info，在我们的例子中是

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

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

Answer 1

您需要使用按键查找菜单项。你可以实现这样的东西:

   function getMenuInfoByKey (state, key) {
      let menuObj = state.menu.find(menuItem => menuItem.key === key);
      return menuObj && menuObj.info || null;
    }

然后您就可以轻松使用它了 let selectedMenuInfoObj = getMenuInfoByKey(this.state, '2019')