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

IT技术 javascript reactjs react-hooks
2021-05-01 02:20:48

我有一个函数 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']

  };
2个回答

展开前一个标签并添加 selectedTag 到最后

只是改变这个

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

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

或者

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

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

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