将一个新值推送到 React 钩子中的嵌套数组

Question

我有一个函数onTagSelected((，它现在更新对象内键的单个值：

const NotesContainer = ({
}) => {
const [notesDummyData, setNotesDummyData] = useState([
{
id: '5',
title: 'Sauna',
tag: 'relax',
},
{
id: '7',
title: 'Finland',
tag: 'nordics'
},
]);
const onTagSelected = (selectedTag, itemId) => {
setNotesDummyData(notesDummyData.map((x) => {
if (x.id !== itemId) return x;
return { ...x, tag: selectedTag };
}));
};

现在我想更改功能并能够使用许多标签。我应该如何修改函数以将新标签值推送到新的嵌套标签：数组。

const [notesDummyData, setNotesDummyData] = useState([
{
id: '5',
title: 'Sauna',
tag: ['relax', 'wellness']
},
{
id: '7',
title: 'Finland',
tag: ['nordics', 'winter']
},
]);

const onTagSelected = (selectedTag, itemId) => {
// Push new tag to nested array for specific item -> tag: ['nordics', 'winter', 'selectedTag']
};

Answer 1

展开上一个标签并将 selectedTag 添加到末尾

只需更改此内容

return { ...x, tag: selectedTag };

自

return { ...x, tag: [...x.tag, selectedTag] };

或

return { ...x, tag: x.tag.concat(selectedTag) };

Answer 2

您可以使用 es6 解构将新项目添加到数组中。

const onTagSelected = (selectedTag, itemId) => {
setNotesDummyData(notesDummyData.map((x) => {
if (x.id !== itemId) return x;
return { ...x, tag: [...x.tag, selectedTag] };
}));
}