在 React 中將新的子對象添加到現有的 object

Question

我正在嘗試通過 useState 更新一個子 object 和一個額外的 object。 我創建了一個示例以使這一點更清楚：

https://codesandbox.io/s/affectionate-wescoff-u01x0?file=/src/App.js

示例 object 如下所示：

{
  "id": 123,
  "books": {
    "book": {}
  }
}

當我推送更多數據時，我希望它看起來像這樣：

{
  "id": 123,
  "books": {
     "book": {
      "name": "Sirens of Titan",
      "author": "Kurt Vonnegut"
      },
     "book": {
      "name": "The Hobbit",
      "author": "J.R.R. Tolkein"
    }
  }
}

在這個階段，我把它搞砸了，它看起來像：

{
   "id":123,
   "books":[
      {
         "0":{
            "book":{
               
            },
            "sampleData1":{
               "book":{
                  "name":"Sirens of Titan",
                  "author":"Kurt Vonnegut"
               }
            }
         },
         "sampleData2":{
            "book":{
               "name":"The Hobbit",
               "author":"J.R.R. Tolkein"
            }
         }
      }
   ]
}

這是我設置損壞的 object 的方式：

  const [main, setMain] = useState(library);

  function addNestedObj() {
    setMain({ ...main, books: [{ ...main.books, sampleData1 }] });
  }

Answer 1

只需將解構更進一步：

setMain({...main, kids: [...main.kids, secondObj]})

Answer 2

您的library object 的books屬性是 object，而不是數組。 這可能是必要的，但我猜這不是因為您的 book 對象已經具有name屬性，因此它們不需要單獨的鍵。

通過該更改，您可以修改setMain function 以將 sampleData 的book屬性添加到sampleData的books屬性：

setMain({ ...main, books: [...main.books, sampleData1.book] });

我在您的 CodeSandbox 的一個分支中添加了這些更改： https://codesandbox.io/s/modest-fog-byegh?file=/src/App.js