簡體   English   中英

試圖在 object 反應的數組內創建 object

[英]trying to create object inside array of an object react

我試圖對此進行研究,但我似乎無法弄清楚。 所以我有這個 function

const addWork = () => {
    setWorkArray([...workArray, { id: uniqid(), company: '', title: '', dateFrom: '', dateTo: '', desc: [], editing: true }]);
};

這會將 object 添加到我的 workArray,我正在嘗試弄清楚如何將 object 添加到 desc 數組。 我想我在正確的軌道上我只是無法正確地弄清楚下面的 function。

const addWorkDesc = (itemId) => {
    let f;
    const inOf = workArray.filter((item, index) => {
        f = index;
        return item.id == itemId;
    });
    setWorkArray({ ...workArray, ...workArray[f].desc, desc: [{ id: uniqid(), item: '', editing: true }] });
};

基本上,當我嘗試將 object 推入 desc 數組時,workArray 看起來像這樣

[
   { 
      id: 1asd5y, //generated with uniqid()
      company: 'some company', 
      title: 'peon', 
      dateFrom: 'fall 2012', 
      dateTo: 'spring 2014', 
      desc: [
             { 
                 id: 5d554ty, //generated with uniqid() 
                 item: 'some text here', 
                 editing: true 
              },
              { 
                 id: 9s9d87f, //generated with uniqid() 
                 item: 'some text here', 
                 editing: true 
              },
             ], 
      editing: true 
   },
   { 
      id: 0s09d8f, //generated with uniqid()
      company: 'some company', 
      title: 'peon', 
      dateFrom: 'fall 2012', 
      dateTo: 'spring 2014', 
      desc: [
             { 
                 id: 34kjh5, //generated with uniqid() 
                 item: 'some text here', 
                 editing: true 
              },
              { 
                 id: 77cvb7, //generated with uniqid() 
                 item: 'some text here', 
                 editing: true 
              },
             ], 
      editing: true 
   },
]

因此,這不如您的解決方案優雅,但可以完成工作。

let workArray = [];

const addWork = () => {
  workArray = [
    ...workArray,
    {
      id: "a",
      company: "",
      title: "",
      dateFrom: "",
      dateTo: "",
      desc: [],
      editing: true,
    },
  ];
};

const addWorkDesc = (itemId) => {
  let newWorkArray = [];
  workArray.forEach((item) => {
    if (item.id === itemId) {
      item.desc.push({ id: "aa", item: "", editing: true });
    }
    newWorkArray.push(item);
  });
  workArray = newWorkArray;
};

addWork();
console.log(workArray);
addWorkDesc("a");
console.log(workArray);

logs -> [
  {
    id: 'a',
    company: '',
    title: '',
    dateFrom: '',
    dateTo: '',
    desc: [],
    editing: true
  }
]

then 

logs -> [
  {
    id: 'a',
    company: '',
    title: '',
    dateFrom: '',
    dateTo: '',
    desc: [ [Object] ],
    editing: true
  }
]

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM