」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 如何使用「setState」更新狀態中的巢狀物件?

如何使用「setState」更新狀態中的巢狀物件?

發佈於2024-11-17
瀏覽:579

How to Update a Nested Object in State Using `setState`?

使用setState 更新state.item[1]

在這種情況下,您正在嘗試更新物件內的物件使用setState 在在您的狀態中。若要正確更新狀態,您需要複製整個狀態對象,修改副本,然後將狀態設定為更新後的副本。

以下是如何更新 state.item[1] 使用setState:

// 1. Make a shallow copy of the items
let items = [...this.state.items];

// 2. Make a shallow copy of the item you want to mutate
let item = {...items[1]};

// 3. Replace the property you're interested in
item.name = 'newName';

// 4. Put it back into our array. N.B. we *are* mutating the array here, 
//    but that's why we made a copy first
items[1] = item;

// 5. Set the state to our new copy
this.setState({items});

如果需要,您可以合併步驟 2 和 3:

let item = {
    ...items[1],
    name: 'newName'
}

或你可以在一行中完成整個事情:

this.setState(({items}) => ({
    items: [
        ...items.slice(0,1),
        {
            ...items[1],
            name: 'newName',
        },
        ...items.slice(2)
    ]
}));

注意:在這些範例中,我們假設 items 是一個陣列。如果 items 是對象,您將對對象屬性進行類似的更新。

請記住,在使用 setState 時,您應該始終在修改之前複製先前的狀態,以確保不會意外發生變更原始狀態物件。

最新教學 更多>
  • Bootstrap 4 Beta 中的列偏移發生了什麼事?
    Bootstrap 4 Beta 中的列偏移發生了什麼事?
    Bootstrap 4 Beta:列偏移的刪除和恢復Bootstrap 4 在其Beta 1 版本中引入了重大更改柱子偏移了。然而,隨著 Beta 2 的後續發布,這些變化已經逆轉。 從 offset-md-* 到 ml-auto在 Bootstrap 4 Beta 1 中, offset-md-*...
    程式設計 發佈於2024-11-17
  • 大批
    大批
    方法是可以在物件上呼叫的 fns 數組是對象,因此它們在 JS 中也有方法。 slice(begin):將陣列的一部分提取到新數組中,而不改變原始數組。 let arr = ['a','b','c','d','e']; // Usecase: Extract till index ...
    程式設計 發佈於2024-11-17
  • 為什麼 Go 的型別切換不允許 Fallthrough?
    為什麼 Go 的型別切換不允許 Fallthrough?
    類型切換的失敗:深入解釋Go 中的類型切換允許根據具體類型有效地處理值。然而,與標準 switch-case 語句不同的是,在類型 switch 中明確不允許fallthrough。這種設計選擇引發了對其基本原則的質疑。 理解原因Go 規範規定型開關中不允許「fallthrough」。這種禁止源自於...
    程式設計 發佈於2024-11-17
  • 在 Go 中使用 WebSocket 進行即時通信
    在 Go 中使用 WebSocket 進行即時通信
    构建需要实时更新的应用程序(例如聊天应用程序、实时通知或协作工具)需要一种比传统 HTTP 更快、更具交互性的通信方法。这就是 WebSockets 发挥作用的地方!今天,我们将探讨如何在 Go 中使用 WebSocket,以便您可以向应用程序添加实时功能。 在这篇文章中,我们将介绍: WebSoc...
    程式設計 發佈於2024-11-17
  • 如何解決在 MySQL 中將 @GenerateValue GenerationType.TABLE 與多態抽象超類別一起使用時出現「'where 子句'中的未知列 'sequence_name'」錯誤?
    如何解決在 MySQL 中將 @GenerateValue GenerationType.TABLE 與多態抽象超類別一起使用時出現「'where 子句'中的未知列 'sequence_name'」錯誤?
    @GeneratedValue MySQL 上的多態抽象超類別@GeneratedValue MySQL 上的多態抽象超類別在使用Hibernate 和MySQL 的Spring MVC 應用程式中,我們發現嘗試持久化抽象化抽象BaseEntity 的超類BaseEntity子類,遇到「表'...
    程式設計 發佈於2024-11-17
  • 如何在 PHP 中組合兩個關聯數組,同時保留唯一 ID 並處理重複名稱?
    如何在 PHP 中組合兩個關聯數組,同時保留唯一 ID 並處理重複名稱?
    在 PHP 中組合關聯數組在 PHP 中,將兩個關聯數組組合成一個數組是常見任務。考慮以下請求:問題描述:提供的代碼定義了兩個關聯數組,$array1 和 $array2。目標是建立一個新陣列 $array3,它合併兩個陣列中的所有鍵值對。 此外,提供的陣列具有唯一的 ID,而名稱可能重疊。要求是建...
    程式設計 發佈於2024-11-17
  • 如何在 Go 中存取 HTML 模板中的嵌套結構欄位?
    如何在 Go 中存取 HTML 模板中的嵌套結構欄位?
    如何在Go 中存取HTML 模板中的映射元素的結構字段本文解決了使用html/ 從HTML 模板中的映射元素檢索結構字段的問題Go 中的模板包。 考慮以下 Task 結構體:type Task struct { Cmd string Args []string Desc strin...
    程式設計 發佈於2024-11-17
  • 如何動態載入 JavaScript 檔案並處理其載入事件?
    如何動態載入 JavaScript 檔案並處理其載入事件?
    動態載入 JavaScript 檔案動態 JavaScript 檔案載入在模組化和優化 Web 應用程式中起著至關重要的作用。 Prototype 和 jQuery 等主流 JavaScript 程式庫利用此技術來擴展其功能並提高效能。 動態載入JavaScript 檔案動態載入JavaScript...
    程式設計 發佈於2024-11-17
  • Tkinter:Python 打造出令人驚嘆的 GUI 的秘密武器
    Tkinter:Python 打造出令人驚嘆的 GUI 的秘密武器
    你的 Python 脚本感觉有点……简单吗?您是否发现自己渴望找到一种方法,使您的代码不仅具有功能性,而且在视觉上也有吸引力?如果您曾经梦想通过时尚的交互式界面将您的 Python 项目变为现实,那么是时候来认识一下 Tkinter - Python 桌面应用程序开发的无名英雄。 Tkinter 不...
    程式設計 發佈於2024-11-17
  • 為什麼 Go 中 rune 是 int32 的別名而不是 uint32?
    為什麼 Go 中 rune 是 int32 的別名而不是 uint32?
    為什麼 rune 是 Go 中 int32 的別名,而不是 uint32? 儘管 rune 類型的主要目的是表示字元值,但 rune 類型Go 中沒有定義為 uint32 的別名。相反,它是 int32 的別名。鑑於字元通常由正值表示,此選擇似乎違反直覺。 此決定背後的基本原理源於符文作為 Unic...
    程式設計 發佈於2024-11-17
  • 如何用 PHP 安全地實現會員專用頁面登入系統?
    如何用 PHP 安全地實現會員專用頁面登入系統?
    PHP:使用登入系統保護會員專用頁面提供的代碼面臨的挑戰提供的PHP 代碼遇到了幾個阻礙其實現的問題功能:檢索查詢結果:而不是使用$data1 = $conn->query($sql1);,正確的做法是使用$data = mysqli_fetch_array( $conn->query($sql1)...
    程式設計 發佈於2024-11-17
  • 如何在 CSS 類別名稱中使用轉義百分號來建立動態佈局元素?
    如何在 CSS 類別名稱中使用轉義百分號來建立動態佈局元素?
    CSS中.container.\31 25\25是什麼意思? 反斜線字元()用於轉義特殊字元CSS,例如百分號 (%)$。這允許使用原本無效的標識符,例如包含某些標點符號的標識符。 在提供的範例中,反斜線用於轉義類別名稱 .container 中的百分號。 \ 31 25\25。這導致類別名稱等同於...
    程式設計 發佈於2024-11-17
  • 如何使用標記有效地拆分 C++ 字串?
    如何使用標記有效地拆分 C++ 字串?
    使用標記有效拆分C 字串要根據指定標記將C std::string 拆分為子字串,有多種方法可供選擇可考慮。最有效的解決方案取決於您的應用程式的特定要求。 在您的情況下,字串由 ; 分隔。字符,並且 C 字串函數和 Boost 的使用受到限制,您可以使用 std::getline() 函數。此函數允...
    程式設計 發佈於2024-11-17
  • 在 Spans 中使用「float: right」時如何保留 HTML 順序?
    在 Spans 中使用「float: right」時如何保留 HTML 順序?
    使用Float:right 反轉Span 順序使用Float:right 反轉Span 順序在提供的HTML 中,具有「button」類別的Span 的樣式為「float : right” ,”導致它們以與HTML 結構相反的順序顯示。順序?不要直接浮動span 元素,而是將它們包裝在包含元素中並將...
    程式設計 發佈於2024-11-17
  • 如何將 SDL2 和 SDL_image 與 CMake 一起用於 C++ 專案?
    如何將 SDL2 和 SDL_image 與 CMake 一起用於 C++ 專案?
    在CMake中使用SDL2和SDL_image在這篇文章中,我們深入研究了在CMake中使用SDL2圖形庫和SDL_image擴展的步驟您的C 專案在CMake 的幫助下。 配置專案並依賴項project(shooter-cmake2) cmake_minimum_required(VERSION ...
    程式設計 發佈於2024-11-17

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3