React.js：更新存儲在 state 中的對象數組

Question

我有一個對象數組，我存儲在 state 中，每個 Object 存儲我想用來渲染組件的值：

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' }
]

我正在嘗試編寫一個 function 在單擊按鈕時更新對象數組。 我將按鈕設置為調用 function 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,
        };
    });
};

但是，當我單擊按鈕時，什么也沒有發生。 我期望發生的是對象的activeModal數組被更新以將當前活動的active值的模式更改為false ， iconColor到'white'和backgroundColor到'black' 。 它還應該將被點擊的模態的active值從false更改為true ，將iconColor為'black' ，並將backgroundColor更改為'white'並將所有更改保存到state 。 我無法弄清楚我做錯了什么，因為代碼看起來應該可以工作。

Answer 1

我認為你只需要改變：

return {
    updatedActiveModal,
};

至

return {
    activeModal: updatedActiveModal,
};