”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 如何使用“setState”更新状态中的嵌套对象?

如何使用“setState”更新状态中的嵌套对象?

发布于2024-11-17
浏览:866

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 时,您应该始终在修改之前复制之前的状态,以确保不会意外发生变化原始状态对象。

最新教程 更多>
  • 在 Go 中使用 WebSocket 进行实时通信
    在 Go 中使用 WebSocket 进行实时通信
    构建需要实时更新的应用程序(例如聊天应用程序、实时通知或协作工具)需要一种比传统 HTTP 更快、更具交互性的通信方法。这就是 WebSockets 发挥作用的地方!今天,我们将探讨如何在 Go 中使用 WebSocket,以便您可以向应用程序添加实时功能。 在这篇文章中,我们将介绍: WebSoc...
    编程 发布于2024-11-17
  • 如何使用 MySQL 查找今天生日的用户?
    如何使用 MySQL 查找今天生日的用户?
    如何使用 MySQL 识别今天生日的用户使用 MySQL 确定今天是否是用户的生日涉及查找生日匹配的所有行今天的日期。这可以通过一个简单的 MySQL 查询来实现,该查询将存储为 UNIX 时间戳的生日与今天的日期进行比较。以下 SQL 查询将获取今天有生日的所有用户: FROM USERS ...
    编程 发布于2024-11-17
  • 如何在 PHP 中组合两个关联数组,同时保留唯一 ID 并处理重复名称?
    如何在 PHP 中组合两个关联数组,同时保留唯一 ID 并处理重复名称?
    在 PHP 中组合关联数组在 PHP 中,将两个关联数组组合成一个数组是一项常见任务。考虑以下请求:问题描述:提供的代码定义了两个关联数组,$array1 和 $array2。目标是创建一个新数组 $array3,它合并两个数组中的所有键值对。 此外,提供的数组具有唯一的 ID,而名称可能重合。要求...
    编程 发布于2024-11-17
  • 大批
    大批
    方法是可以在对象上调用的 fns 数组是对象,因此它们在 JS 中也有方法。 slice(begin):将数组的一部分提取到新数组中,而不改变原始数组。 let arr = ['a','b','c','d','e']; // Usecase: Extract till index p...
    编程 发布于2024-11-17
  • 如何在 Go 中访问 HTML 模板中的嵌套结构字段?
    如何在 Go 中访问 HTML 模板中的嵌套结构字段?
    如何在 Go 中访问 HTML 模板中的映射元素的结构字段本文解决了使用 html/ 从 HTML 模板中的映射元素检索结构字段的问题Go 中的模板包。考虑以下 Task 结构体:type Task struct { Cmd string Args []string Desc st...
    编程 发布于2024-11-17
  • 如何修复 macOS 上 Django 中的“配置不正确:加载 MySQLdb 模块时出错”?
    如何修复 macOS 上 Django 中的“配置不正确:加载 MySQLdb 模块时出错”?
    MySQL配置不正确:相对路径的问题在Django中运行python manage.py runserver时,可能会遇到以下错误:ImproperlyConfigured: Error loading MySQLdb module: dlopen(/Library/Python/2.7/site-...
    编程 发布于2024-11-17
  • 如何动态加载 JavaScript 文件并处理其加载事件?
    如何动态加载 JavaScript 文件并处理其加载事件?
    动态加载 JavaScript 文件动态 JavaScript 文件加载在模块化和优化 Web 应用程序中起着至关重要的作用。 Prototype 和 jQuery 等主流 JavaScript 库利用此技术来扩展其功能并提高性能。动态加载 JavaScript 文件动态加载 JavaScript ...
    编程 发布于2024-11-17
  • 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
  • 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 的别名。鉴于字符通常由正值表示,此选择似乎违反直觉。此决定背后的基本原理源于符文作为 Unicod...
    编程 发布于2024-11-17
  • 如何用 PHP 安全地实现会员专用页面登录系统?
    如何用 PHP 安全地实现会员专用页面登录系统?
    PHP:使用登录系统保护会员专用页面提供的代码面临的挑战提供的 PHP 代码遇到了几个阻碍其实现的问题功能:检索查询结果:而不是使用 $data1 = $conn->query($sql1);,正确的做法是使用 $data = mysqli_fetch_array($conn->query($sql...
    编程 发布于2024-11-17
  • 如何在 CSS 类名称中使用转义百分号来创建动态布局元素?
    如何在 CSS 类名称中使用转义百分号来创建动态布局元素?
    CSS中.container.\31 25\25是什么意思?反斜杠字符()用于转义特殊字符CSS,例如百分号 (%)$。这允许使用原本无效的标识符,例如包含某些标点符号的标识符。在提供的示例中,反斜杠用于转义类名 .container 中的百分号。\ 31 25\25。这导致类名等同于 .conta...
    编程 发布于2024-11-17
  • 除了“if”语句之外:还有哪些地方可以在不进行强制转换的情况下使用具有显式“bool”转换的类型?
    除了“if”语句之外:还有哪些地方可以在不进行强制转换的情况下使用具有显式“bool”转换的类型?
    无需强制转换即可上下文转换为 bool您的类定义了对 bool 的显式转换,使您能够在条件语句中直接使用其实例“t”。然而,这种显式转换提出了一个问题:“t”在哪里可以在不进行强制转换的情况下用作 bool?上下文转换场景C 标准指定了四种值可以根据上下文转换为的主要场景bool:语句:if、whi...
    编程 发布于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 顺序在提供的 HTML 中,具有“button”类的 Span 的样式为“float: right” ,”导致它们以与 HTML 结构相反的顺序显示。是否可以修改 CSS 以保留 HTML 顺序?要解决此问题,有两种使用 CSS 操纵定位的通用解决方案:...
    编程 发布于2024-11-17

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3