給定一個數組 A，將它與 React useState 對象內的數組 B 連接起來

Question

• 我正在 React 中實現無限滾動，我必須調用后端 API 來獲取下一頁的內容。 但是，我已將 useState 設置為對象。 並且想要更新對象內部的數組。

• 我知道這可以通過將結果設置為 useState 並為“next”和“previous”設置額外的 useState 來輕松解決； 但是，我想找到如何在當前條件下解決此問題。

• 還請建議哪一種是最佳方式（一個 useState<object(Custom interface)> 或三個 useState 分別用於“result”、“next”和“previous”）

我有一個用下面給出的數據初始化的 React useState 鈎子

{
    "count": 2,
    "next": 2,
    "previous": null,
    "results": [
   {
    'id': 1,
    'name': 'test1'
   },
   {
    'id': 2,
    'name': 'test2'
   }

   ]
}

我得到的新數據的形式

data = {
    "count": 2,
    "next": null,
    "previous": 1,
    "results": [
   {
    'id': 3,
    'name': 'test3'
   },
   {
    'id': 4,
    'name': 'test4'
   }

   ]
}

如何連接兩個數組並更新狀態，以獲得類似這樣的結果

{
    "count": 2,
    "next": null,
    "previous": 1,
    "results": [
   {
    'id': 1,
    'name': 'test1'
   },
   {
    'id': 2,
    'name': 'test2'
   },
   {
    'id': 3,
    'name': 'test3'
   },
   {
    'id': 4,
    'name': 'test4'
   }

   ]
}

Answer 1

假設您的狀態變量名為state ，您將執行以下操作：

setState({
  ...state, 
  next: null, 
  previous: 1, 
  results: [
    ...state.results, 
    {
      'id': 3,
      'name': 'test3'
    },
    {
      'id': 4,
      'name': 'test4'
    }
  ]
})