React使用setState Hook修改嵌套对象的isClicked属性实现开关切换

你可以直接使用React状态的函数式更新配合不可变更新语法完成修改，完整的apply函数实现如下：

const apply = (e) => {
    const clickedId = e.currentTarget.id;
    console.log("clicked button id: ", clickedId);
    setIsApply(prevIsApply => {
        // 遍历数组生成新数组，避免修改原状态
        return prevIsApply.map(item => {
            // 匹配到对应id的数组项
            if (item[clickedId]) {
                return {
                    [clickedId]: {
                        // 保留当前项其他属性
                        ...item[clickedId],
                        // 取反isClicked状态
                        isClicked: !item[clickedId].isClicked
                    }
                }
            }
            // 未匹配的项直接返回
            return item;
        })
    })
};

注意要点 #

• 必须使用函数式更新写法获取最新的isApply状态，避免闭包导致读取到旧状态
• 全程通过map、展开运算符生成新的数组/对象，不直接修改原状态，符合React状态更新规则，不会出现视图不渲染的问题

可选优化建议 #

你当前的数组套对象的结构查询效率较低，可以优化为直接用对象存储，键为按钮id，修改逻辑会更简洁：

// 优化后的状态定义
const [isApply, setIsApply] = useState({
    "0": {
        "isClicked": false,
        "isExpand": false,
        "uni": "NSBM"
    },
    "1": {
        "isClicked": false,
        "isExpand": false,
        "uni": "NSBM"
    },
    // 其余id对应项以此类推
})

优化后的状态更新代码：

const apply = (e) => {
    const clickedId = e.currentTarget.id;
    setIsApply(prev => ({
        ...prev,
        [clickedId]: {
            ...prev[clickedId],
            isClicked: !prev[clickedId].isClicked
        }
    }))
};

内容的提问来源于stack exchange，提问作者Himath