具有特定键的样式对象

Question

我有以下数据结构：

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：none）元素？在display:true元素11，10和9sh可见，并且具有关键1的元素被隐藏。

老实说，我坐了第三天，无法决定。我请求你的帮助，不胜感激任何帮助......

Answer 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，可以使用值为undefined的"none"属性：

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

Answer 2

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

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的函数参数而不是对象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
})