Question

我正在尝试通过 useState 使用附加对象更新子对象。我创建了一个例子来更清楚地说明这一点：

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

示例对象如下所示：

{
  "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"
            }
         }
      }
   ]
}

这是我设置损坏对象的方式：

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

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

Answer 1

将解构更进一步：

while(true){
    $r = file_get_contents("php://stdin");
    goToPreviousLine();
    echo $r;
}

Answer 2

您的 books 对象的 library 属性是一个对象，而不是一个数组。这可能是必要的，但我猜不是因为您的书对象已经具有 name 属性，因此它们不需要单独的键。

通过该更改，您可以修改您的 setMain 函数，将 book 的 sampleData 属性添加到您的状态的 books 属性中：

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

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

将新的子对象添加到 React 中的现有对象

2 个答案: