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和{{}删除（也许可以分配样式显示：无）元素1}}？在9元素display:true，11和10应该可见，并且键为9的元素被隐藏。

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

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的{{1}}属性：

"none"

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
        })
    }
})

和 true 情况类似。
那么这段代码是怎么回事？
首先，我们使用setState的function参数而不是对象one，因为我们需要组件的先前状态才能创建新的对象。
接下来，我们映射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
})

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

2 个答案: