在 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