如何使用react array map方法將項目添加到特定ID

Question

這是我的示例數組，其中包含ID，項目和項目注釋說明。

let sampleArr = [
   {
     id:1,
     item:"item",
     notes:["one"]
   },
   {
     id:2,
     item:"item2",
     notes:["one","two"]
   },
   {
     id:3,
     item:"item3",
     notes:["one","two"]
   }
]

在這里，我想將注釋添加到帶有以下注釋的id：3中：“三”，因此我希望最終輸出應類似於示例數組。

{    
    id:3,
    item:"item3",
    notes:["one","two","three"]
 }

Answer 1

您可以創建一個函數，該函數根據id和更新值搜索元素

 let sampleArr = [{id: 1,item: "item",notes: ["one"]},{id: 2,item: "item2",notes: ["one", "two"]},{id: 3,item: "item3",notes: ["one", "two"]}] const updateNotes = (id,value) =>{ return sampleArr.map(v=> { return v.id == id ? {...v, notes: [...v.notes, value]} : v }) } console.log(updateNotes(3,'three')) 

Answer 2

這里的要點是只concat新note時item.id === id否則只返回舊項目

const addNoteById = (note, id) =>{
    return sampleArr.map(item =>({
        ...item,
        notes : item.id === id ? item.notes.concat(note) : item.notes
    }))
} 

 const sampleArr = [{id:1,item:"item", notes:["one"]},{id:2,item:"item2",notes:["one","two"]},{id:3,item:"item3",notes:["one","two"]}] const addNoteById = (note, id) =>{ return sampleArr.map(item =>({ ...item, notes : item.id === id ? item.notes.concat(note) : item.notes })) } const result = addNoteById('foo', 3) console.log(result)