使用特定键为对象设置样式_JavaScript

我有以下数据结构：

this.state = {
            active_menu: 2018,
            info: [
                {
                    key: 11,
                    title: 'A',
                    opened: false,
                    content: []
                }, {
                    key: 10,
                    title: 'B',
                    opened: false,
                    content: []
                }, {
                    key: 9,
                    title: 'C',
                    opened: false,
                    content: []
                },
                {
                    key: 1,
                    title: 'D',
                    opened: false,
                    content: []
                }],
            display: true
}

告诉我，拜托，怎么可能与价值display:false去除（也许它可以指定样式显示：无）用钥匙元素11 ， 10和9 ？ 在display:true元件11 ， 10和9应该是可见的，并用键的元素1被隐藏。

老实说，我坐了第三天，不能决定。 我要求您的帮助，将不胜感激。

是的，我问如何更改数组中的对象

由于不允许直接修改状态，因此创建了一个info及其对象的副本：

this.setState(({display, info}) => ({
    info: info.map(entry => {
        const {key} = entry;
        const newEntry = {...entry};
        if (!display && (key == 11 || key == 10 || key == 9)) {
            newEntry.display = "none";
        }
        return newEntry;
    })
}));

或者，如果display属性不是"none" ，则可以使用undefined值的display属性：

this.setState(({display, info}) => ({
    info: info.map(entry => ({
        ...entry,
        display: !display && (entry.key == 11 || entry.key == 10 || entry.key == 9) ? "none" : undefined
    }))
}));

我想您可以使用以下代码：

this.setState((prevState) => {
    return {
        ...prevState,
        display: false,
        info: prevState.info.map(i => {
            if(i.key ===9 || i.key === 10 || i.key === 11) return {...i, display: 'none' }
            else return i
        })
    }
})

与真实情况类似。
那么这段代码是怎么回事？
首先，我们使用setState的function参数而不是对象1，因为我们需要组件的先前状态才能创建新的对象。
接下来，我们映射prevState的信息，并尝试基于该信息创建新状态。
为此，我们检查每个项目的键，看它是否等于9、10或11，如果是，返回修改后的对象，在其他地方，我们返回原始项目而不更改它。

但是我认为您的状态结构对于此用例不利。 所以我建议改为：

state = {
    active_menu: 2018,
    info: {
        11: {
            title: 'A',
            opened: false,
            content: []
        },
        ....
    }
}

以及以下用于更新状态的代码：

this.setState((prevState) => {
    return {
        ...prevState,
        display: false,
        info: {
            ...prevState.info,
            11: {
                ...prevState.info[11],
                display: 'none'
            },
            ...
        }
    }
})

以下是用于映射信息项的内容：

Object.keys(this.state.info).map(infoKey => {
    let info = this.state.info[infoKey];
    // Do whatever you want with info and return the component you want to render
})

使用特定键为对象设置样式

问题描述

1楼

2楼