Javascript React.js：更新状态中存储的对象数组

我有一个存储在状态中的对象数组，每个对象都存储了我要用于渲染组件的值：

const activeModal = [
    { modalName: 'dashboard', modal: Dashboard, active: true, icon: DashboardIcon, iconColor: 'black', iconBackground: 'white' },
    { modalName: 'memsline', modal: MEMsLine, active: false, icon: MEMsLineIcon, iconColor: 'white', iconBackground: 'black' },
    { modalName: 'mems', modal: MEMsGrid, active: false, icon: MEMsIcon, iconColor: 'white', iconBackground: 'black' },
    { modalName: 'events', modal: Events, active: false, icon: EventIcon, iconColor: 'white', iconBackground: 'black' },
    { modalName: 'people', modal: People, active: false, icon: PeopleIcon, iconColor: 'white', iconBackground: 'black' },
    { modalName: 'places', modal: Places, active: false, icon: PlaceIcon, iconColor: 'white', iconBackground: 'black' },
    { modalName: 'music', modal: Music, active: false, icon: MusicIcon, iconColor: 'white', iconBackground: 'black' },
    { modalName: 'movies', modal: Movies, active: false, icon: MovieIcon, iconColor: 'white', iconBackground: 'black' },
    { modalName: 'tvshows', modal: TVShows, active: false, icon: TVIcon, iconColor: 'white', iconBackground: 'black' },
    { modalName: 'games', modal: Games, active: false, icon: GameIcon, iconColor: 'white', iconBackground: 'black' },
    { modalName: 'settings', modal: UserSettings, active: false, icon: SettingsIcon, iconColor: 'white', iconBackground: 'black' }
]

我试图编写一个函数，在单击按钮时更新对象数组。我设置了按钮来调用函数

openModal

onClick

，并传回

modalName

，如下所示：

openModal = modalType => () => {
    this.setState(state => {
        const updatedActiveModal = state.activeModal.map(item => {
            if (item.active === true) {
                return {
                    modalName: item.modalName,
                    modal: item.modal,
                    active: false,
                    icon: item.icon,
                    iconColor: 'white',
                    iconBackground: 'black'
                };
            } else if (item.modalName === modalType) {
                return {
                    modalName: item.modalName,
                    modal: item.modal,
                    active: true,
                    icon: item.icon,
                    iconColor: 'black',
                    iconBackground: 'white'
                };
            } else {
                return item;
            }
        });
        return {
            updatedActiveModal,
        };
    });
};

---

但是，当我单击按钮时，什么都没有发生。我希望发生的是更新对象的

activemodel

数组，将当前处于活动状态的

active

值更改为

false

，将

iconColor

更改为

“白色”

，将

背景色更改为
“黑色”
。它还应该将点击的模式的
活动
值从
假
更改为
真
，
图标颜色
更改为
黑色
，
背景色
更改为
白色
，并将所有更改保存到
状态
。我不知道我做错了什么，因为代码看起来应该可以工作。
我认为您只需要更改：

return {
    updatedActiveModal,
};

到

是的，你说得对-我离得太近了！非常感谢。你能解释一下为什么需要
activeModal:
，这样我就可以了解为什么需要它了吗

它相当于

返回{updatedActiveModal:updatedActiveModal，}

，因此您的状态将具有

{activeModal/*旧值*/，updatedActiveModel/*新值*/}

，但在代码的其他地方，您只查看

状态。activeModal

，因此您需要告诉状态将

activeModel

替换为

updatedActiveModel

，而不是向状态添加新的键/值对。

return {
    activeModal: updatedActiveModal,
};