使用React中的useState钩子更新对象

Question

我在板变量中有一个对象

初步数据：

const [board, setBoard] = useState({
    lanes: [],
});

{
    lanes: [{
            title: 'Bugs',
            id: 'd83706b0-b252-11ec-8845-ad6b1e4ecd03',
            cards: [{
                id: null,
                title: 'Bug #1',
                description: 'Can AI make memes',
            }, ],
        },
        {
            title: 'Tests',
            id: 'd83706b0-b252-11ec-8845-ad6b1e4ecd04',
            cards: [{
                id: null,
                title: 'Test #1',
                description: 'Can AI make memes',
            }, ],
        },
    ],
};

我想向卡数组添加一个新元素，但只添加到数组中的第一个元素。其他答案似乎指向必须使用回调模式，但我对此相当陌生。

谢谢你的帮助。

Answer 1

对于要对useState变量进行的任何修改，必须在"set“函数的内部使用箭头函数。

你可以这样做：

setBoard((currentBoard)=> {
    currentBoard.lanes[0].cards = [...currentBoard.lanes[0].cards, whateverCardYouWantToAdd ]
    return {... currentBoard} //necessary to create a new object because else the hook won't be updated
})