如何在Zustand中实现数组对象的isPicked属性更新？

首先修正原类型定义里的参数错误——原setIspicked的第一个参数定义不符合实际需求，下面是完整的正确实现：

修正后的类型定义 #

type SnakeItem = {
    id: string;
    isPicked: boolean;
    color: string;
};

type Snake = {
    data: SnakeItem[];
    // 传入要修改的元素ID和目标布尔值，更符合逻辑
    setIsPicked: (targetId: string, isPicked: boolean) => void;
};

完整的useSnake Store实现 #

export const useSnake = create<Snake>((set) => ({
    data: [
        { id: '1', isPicked: false, color: '' },
        { id: '2', isPicked: false, color: '' },
        { id: '3', isPicked: false, color: '' },
        { id: '4', isPicked: false, color: '' },
        { id: '5', isPicked: false, color: '' },
        { id: '6', isPicked: false, color: '' },
        { id: '7', isPicked: false, color: '' },
        { id: '8', isPicked: false, color: '' },
        { id: '9', isPicked: false, color: '' },
        { id: '10', isPicked: false, color: '' },
        { id: '11', isPicked: false, color: '' },
        { id: '12', isPicked: false, color: '' },
        { id: '13', isPicked: false, color: '' },
        { id: '14', isPicked: false, color: '' },
        { id: '15', isPicked: false, color: '' },
        { id: '16', isPicked: false, color: '' }
    ],

    setIsPicked: (targetId, isPicked) => {
        // 通过set函数获取当前状态，返回新状态
        set((state) => ({
            data: state.data.map(item => 
                // 匹配到目标ID的元素，更新isPicked属性
                item.id === targetId ? { ...item, isPicked } : item
            )
        }));
    }
}));

关键逻辑说明 #

• 调用Zustand的set函数时，可以传入一个回调，参数是当前的store状态state
• 用map遍历state.data数组：
  • 匹配到目标ID的元素，返回一个新对象（展开原元素的所有属性，覆盖isPicked为传入的布尔值）
  • 不匹配的元素直接返回原对象，保证状态的不可变性

如果要保留传入整个元素对象的参数形式 #

可以调整类型和实现如下：

// 类型定义
type Snake = {
    data: SnakeItem[];
    setIsPicked: (targetItem: SnakeItem, isPicked: boolean) => void;
};

// 方法实现
setIsPicked: (targetItem, isPicked) => {
    set((state) => ({
        data: state.data.map(item => 
            item.id === targetItem.id ? { ...item, isPicked } : item
        )
    }));
}

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